User Interface

Learn the key user interface elements e.g. Designer Menu, Diagrams List & Form View and Designer Editing Canvas

Designer Menu in ServiceNow

The ServiceNow application menu of the ins·pi Designer application.

Designer_Application_Menu

A – Starts the Designer Editing Canvas in a new browser tab

B – Opens the Diagram List & Form View in a new browser tab (v5.0 or later) or the diagrams table (v4.4 or earlier)

C – Shows the table where all diagram elements are stored, with table and status, grouped by diagram (Designer Admin only)

D – Shows the table where all diagram relationships are stored, with table and status, grouped by diagram (Designer Admin only)

E – Open the table to configure class definitions and class fields (Designer Admin only)

F – Filter table, e.g. to set filters to global (Designer Admin only)

G – Configure realtime indicators and indicator breakdowns (Designer Admin only)

H – Open the table to configure relationship definitions and relationship fields (Designer Admin only)

I – Open the shape library table to configure shape libraries, shapes and stencils (Designer Admin only)

J – Template table, e.g. to set templates to global (Designer Admin only)

K – Contact ins·pi support to request 3rd level support or a new feature

L – Open the Designer Knowledge Base

Diagrams List & Form View

Designer_V5.1_Diagram_Form_Full

A – Search – this searches diagram titles and folders for the given search term

B – Global menu – from here you can access the user guide, contact support or configure global settings as a designer admin

C – My diagrams section – Shows diagrams created by the user, categorized by their sharing status

D – New button – allows creation of new diagrams or folders (Folders are managed by Designer admins)

E – Diagrams by workflow state – Shows all diagrams in their respective state of the approval workflow

F – All diagrams section – Shows all diagrams that are visible to the current user in the folder structure configured by designer admins

G – Approval workflow status indicator and controls – Allows to advance the diagram in the configured approval workflow and options to request a diagram update and set it to archived or obsolete

H – Diagram Category – Allows categorization of the diagram, e.g. ‘Process Maps’, ‘Infrastructure Diagrams’, etc. – List can be customized by an administrator

I – Blueprint and Target Date – Diagrams can be set to blueprints ‘As-Is’, ‘Transition’, ‘To-Be’. A target date can bet set for the ‘Transition’ and ‘To-Be’ blueprints.

J – Contributors and Consumers – Select one or more users to contribute to your diagram and select one or more groups that are allowed to read (present) the diagram

K – Related Element – You can select an element from any ServiceNow table to state that the diagram is related to that specific element

L – Content Section – Shows all elements from the repository that are used on the diagram and future elements that exist only visually but have ServiceNow table assigned and can be committed

M – Comment Section – You can leave comments related to the diagram here, e.g. relevant comments to collaborate on the diagram. Comments are visible to everyone that can read the diagram

N – Commit Button – Only visible if the ‘x_inpgh_des.commit’ role is assigned to the current user. Allows committing the selected future elements to the repository

O – Future Elements – Elements and relationships that can be committed to the repository

P – Diagram Version Overview – Shows all diagram versions and indicates any approved version

Q – Present Button – Opens the selected diagram in presentation mode

R – Edit Button – Opens the selected diagram in Designer for further modeling/editing

S – Diagram Context Menu – Provides further options like Copy URL, Export, Print, Clone, Delete

T – Checkout Switch – Indicates if the diagram is checked out

U – Private Mode Switch – Indicates if the diagram is set to private

V – Diagram Preview Pane – Shows an interactive preview of the diagram in presentation mode with all in presentation mode available controls

Designer Editing Canvas

Designer is an online diagraming & modeling application natively running on ServiceNow.

The Designer environment is subdivided into eight (5) main areas of functionality:

Designer_Modeling_Canvas

Designer Environment 

HEADER

Contains main functionality to open the diagram form
Copy diagram link for presentation mode

  • Undo/Redo
  • Change diagram name
  • Save (CTRL+S)
  • Make diagram Private
  • Switch Autolayout on/off

RIBBONS

The ribbons section provides the main application menu which provides quick access to important features within the Designer e.g.:

  • Multipage printing
  • Open diagrams
  • Share diagram link
  • Open diagram in presentation mode (read only)
  • Export diagrams as PNG/SVG
  • Format shapes, text and relationships
  • Fullscreen
  • Zoom options
  • Indicators
  • Personal and global templates 

SHAPE LIBRARIES

  • On the left hand side are the shape libraries. Shapes are grouped and displayed within a shape library, which can be tailored by the Designer Admin.
  • Clicking a shape causes an instance of that shape to appear in the diagram. Clicking and dragging a shape allows you to position the shape anywhere in the work area.
  • The first library to be displayed is the Standard Shapes library, which is located at the top. Each tab below Standard Shapes corresponds to a different library, which can be configured through the More Shapes Library selector. Clicking on any tab will display the shapes for that library.

MODELING CANVAS

  • The modeling canvas is the main area to create your diagrams and models.
  • Click or drag & drop a shape to the library to start drawing a diagram or model, or use elements from ServiceNow via the Repository Browser.
RIGHT SIDEBAR
  • Access any ServiceNow table via the Repository Browser
    • The table picker shows tables defined in the Class Definition table.
    • Select a table to perform a search on the selected table.
    • Enter a text into the search field to receive the search results, or just use the * and press enter to receive all results from the selected table. Click or drag & drop the search result to add a shape with the content in the drawing area.
    • The styling from the Class Definition table will be applied.

Missing Class Definitions

While loading relationships from the repository, content will appear only white with black text for those, which are not defined in the Class Definition table and/or do not have a style definition.

  • Distinguish between committed and not committed (future state) elements in the Content Browser
    • The content browser will show the content of the diagrams separated in committed elements and relationships i.e. those which exist as an instance in a ServiceNow table, and not committed elements and relationships i.e. those which do not exists yet in ServiceNow, but where a table (for elements) or a type (for relationships) have been selected.
  • It is possible to create a diagram that contains different layers of elements. Each layer and its elements will display together (unless you specify otherwise), but is treated as being completely separated from the other layers as far as editing is concerned.
  • Outline provides a useful way of navigating through large complex diagrams. Selecting this option causes the Outline Panel to appear. Clicking and dragging the miniature page shown in the Outline Panel will also move the main page. The part of the miniature page enclosed within the blue frame corresponds to what you can see in the main page. This function is also available from the Toolbar.