Editor
The YouDesign editor serves as the primary interface for Editors, providing a robust suite of tools for crafting content that integrates real-time ServiceNow data with prospective elements.
Editors can construct comprehensive diagrams and models that adhere to the specified teamspace settings with access to shapes, annotations, imagery, data visualizations, and preset templates.
Hover your mouse over the icon to reveal a tooltip displaying its name.
Board Toolbar
| Icon | Purpose | Action | Tip |
|---|---|---|---|
| YouDesign Icon | Acts as the 'Home' button. | Clicking this icon takes you back to the Homepage. | Use this to quickly navigate to your teamspaces and boards overview or switch boards. |
| Board Name | An interactive element for board identification and settings. | Click to rename the current board and access settings. | Keep names clear and distinct for easy identification when working with multiple boards. |
| Search | Quick way to find content on your board. | Click to activate an in-board search to locate text, images, or other elements. | Use the search function to swiftly navigate or find specific items on populated boards. |
| Present | Transforms your board into a presentation. | Click to switch to present mode. | Organize necessary frames or sections before presenting for a smooth transition. Benefit from using full-screen mode. (Full-screen icon is located in the bottom right of the user interface) |
| Export | Versatility in sharing and saving content. | Click to export the board or selected frames in various formats. | Useful for sharing with non-access users or for printing purposes. |
Widget Toolbar
| Icon | Purpose | Action | Description |
|---|---|---|---|
| Realtime Indicators | Access Realtime Indicators controls. | Opens the Realtime Indicators sidebar. | View and toggle Realtime Indicators options applied to your board. |
| Data Panel | Edit shape and relationship data. | Opens the Data Panel sidebar. | Modify the data fields for shapes and their relationships on the board. |
| Explorer | Overview of board content. | Access the Explorer feature. | Provides a summary view for quick navigation to different board elements. |
| Notifications | Track updates and comments. | Opens the Notifications panel. | Stay informed about comments and updates in realtime. |
| Collaborators | View current board collaborators. | Displays collaborators' details. | Shows the number and names of peers working on the board with you. |
| Share | Invite others to the board. | Initiates the sharing process. | Use this to add more collaborators, editors, or viewers to the board. |
Control Bar
Allows you to change currently selected view in Left Sidebar, add Textfields and Frames, and Undo/Redo your actions.
| Icon | Purpose | Action |
|---|---|---|
| Diagramming | Access Diagramming Panel | Click to extend the Left Sidebar and view the Diagramming Panel |
| Data Hub | Access Data Hub | Click to extend the Left Sidebar and view the Data Hub |
| Textfield | Create a Text Field on Canvas | Click to add a Text Field to Canvas |
| Frame | Access New Frame Selection | Click to select format and add a New Frame |
| Undo | Undo previous Action | Reverses the last action or series of performed actions. It provides a way to step back and correct mistakes or unwanted changes. You can also use a Keyboard Shortcut: CTRL/CMD + Z or ALT/Option + Backspace |
| Redo | Repeat the action that was undone | Also known as "Repeat", allows users to reapply the changes that were undone using the "Undo" function. You can also use a Keyboard Shortcut: CTRL/CMD + Y or ALT/Option + SHIFT + Backspace |
Left Sidebar
Extends view of currently selected menu in the Control Bar
Search can be used to quickly find desired elements
You can use the following buttons to change between list and tile view mode:
List View:
Tile View:
Right Sidebar - Data Panel
Data panel is located in the right sidebar and allows you to edit the Element Data without the need to go to ServiceNow.
Similarly, you can view and modify the following:
- Visual elements (which are not associated with a table)
- create links for sharing
- copy visual shape/relationship link
- Frames
- name, description
- copy frame link
- Board
- copy board link
- Visualization
- copy visualization link
- show and edit name, description
- Attachments
- see creation timestamp
Data panel allows you to see the state status of the selected element (current or future state), table it belongs to, its name and custom fields from ServiceNow.
It also allows us to edit table and element name (unless it is set to "Read Only"), and share the link to the current Board with the selected element in focus.
Data Panel Field Configuration
YouDesign admins can configure which fields will be available for each table, for both, current and future state respectively. The fields that the user can see here are depending on the existing configuration made by the administrator. After the fields are added, their value can be changed in the YouDesign Data Panel.
View Toolbar
| Icon | Purpose | Action |
|---|---|---|
| Fullscreen | Extend the interface to fill the whole screen | Click to toggle YouDesign interface Fullscreen mode |
| Fit to Screen | Gives you preview of current selection with adequate zoom level | Click to toggle a Fit to Screen mode |
| Minimap | This small map offers a bird's-eye view, allowing users to navigate and understand the broader context of their canvas position while working on specific details. | Click on the Map icon to toggle Minimap view. You can move the current view highlighted in green rectangle |
| + | The "+" button is a zoom-in control, allowing users to magnify the view in incremental steps. | Click to zoom in |
| - | The "-" button is a zoom-out control, enabling users to decrease the view size in incremental steps. | Click to zoom out |
| Current Zoom | The current canvas zoom percentage level | Click to toggle between custom zoom level and 100% |
| ? | Details and information about current version of YouDesign | Click to view YouDesign Details and more information |
Context Toolbar
Data Hub Shapes Context Toolbar
| Icon | Purpose | Action |
|---|---|---|
| Load Dependencies | Load Dependencies feature in YouDesign enables users to visualize the connections between objects in their data, providing the ability to generate diagrams based on upstream and downstream relationships, references, related lists, and hierarchies. | Click to open Load Dependencies tool menu |
| Font | Font Selection | Click to change Font |
| Font Size | Resizing text | Click to select Font Size |
| Font alignment | Text alignment options | Click to select font alignment |
| Indent | Adding space at the beginning of the line of text | Click to add Indent |
| Text Color | Use to change text colors | Click to open a Color Picker Menu. Select desired color from default color selection or pick a Custom color by pressing the "Custom" button |
| Highlight Text | Choose a color. The text you selected will be highlighted in the color you chose | Select text and click to open Color Picker menu. Select desired color from default color selection or pick a Custom color by pressing the "Custom" button |
| Shape Border Style, Opacity, and Color | Use to further edit Shape Border | Click to open a menu with additional Shape Border style settings. Select desired color from default color selection or pick a Custom color by pressing the "Custom" button |
| Shape Color and Opacity | Use to further edit Shape Fill | Click to open a menu with additional Shape style settings. Select desired color from default color selection or pick a Custom color by pressing the "Custom" button |
| Comment | Used to add comments | Click to add a textual comment |
| Lock | Locking an item is a safeguarding measure. It ensures that once an item is specifically positioned or edited, it won't be accidentally deleted, moved, or edited | Click to toggle Lock/Unlock for one or multiple shapes |
| ··· | More Options | Click ··· to open a dropdown menu with more options Check the table below for more details: |
Context toolbar for Basic Shapes contains only the basic customization options which are included in the extended Data Hub Shape Context Toolbar above.
More options (within the Context Toolbar)
| Icon | Purpose | Action |
|---|---|---|
| Edit | ||
| Copy Style | Allows you to capture and store the visual properties of a selected shape or element | Click to temporarily store copied style information in the tool's memory or clipboard. |
| Paste Style | Allows you to apply the stored or copied visual properties to shapes and elements | Click to apply the stored visual properties from the style that was previously copied to the target selection. |
| Add Comment | Commenting can be useful for collaboration and communication between teams | Click to add a textual comment |
| Copy Link | Copies a link of a current position on canvas | Click to copy current location link |
| Lock | Locking an item is a safeguarding measure. It ensures that once an item is specifically positioned or edited, it won't be accidentally deleted, moved, or edited | Click to toggle Lock/Unlock for one or multiple shapes |
| Bring to Front | Allows you to move a selected shape or element to the foreground layer, making it appear in front of other elements on the canvas | Click to move the selection forward |
| Send to Back | Allows you to move a selected shape or element to the background layer, placing it behind other elements on the canvas | Click to move selection to the back |
| Copy | Copy currently selected elements to clipboard | Click to copy selection |
| Duplicate | Duplicates selection | Click to duplicate selection |
| Delete | Removing a shape or an element | Click to delete selection |
Modeling Canvas (Board)
All the magic happens within your modeling canvas. Here your ideas come to life by using all the surrounding tools. The modeling Canvas can later be shared or presented with different view options.
Updated about 2 months ago