What is the UI Editor?

The new UI Editor (also known as UI 2.0) is an all new version of our UI Editor. It is very flexible and powerful in it's possibilities.

It is a WYSIWYG type html editor, including a various amount of presets, as well as offering the possibility to make completely custom UI.

The new UI Editor is available under Windows > UI Editor.

 

What about the legacy UI Editor?

Both the legacy and the new UI Editor are supported

This means you can set up a project that has legacy UI on 1 step, and new UI on another step.

The Project Health window will throw warnings to ensure you don't use 2 different UI systems on the same step.

In other words, you can test this feature on existing projects in a non-destructive way.

 

Known Issues

• Text variables are supported but without auto-complete.
  Preview works in UI preview and simulation mode.
• Video & Camera Insets are not yet supported on Apple Vision Pro.
• Hover & Active states are not yet supported on Windows, Hololens 2, and Apple Vision Pro.
• The new UI simulation can prevent scroll zooming (alt+right mouse button drag is a good workaround).

Getting started with the UI Editor

Full screen mode

On the top right of the window, there is a little square that maximizes and minimizes the UI Editor Window (this also applies to other windows too). As the new UI Editor is very powerful in it's capabilities, there are a lot of features to explore, maximizing can make it easier to navigate.

Templates

We recommend starting by trying out some of the preset templates ("Select Template") to get familiar with the system, for example the Content template is a popular one.

To prevent issues with the legacy UI Editor, ensure the UI Editor (legacy) "Select Template" is set to (none), when adding a template to a step in the new UI Editor.

Watch this template to learn more about assigning templates to steps and customizing them:

The new UI Editor is a WYSIWYG type editor. It is html and css based. Basic knowledge about html and css is helpful but not required.

In case you are wondering, the unit of measurement we are using for all size related values in CSS is vw.

1. vw (Viewport Width): Represents a percentage of the browser's viewport width, so a value of 1 equals 1% of the viewport's width; therefore, 100vw would represent the full width of the viewport.

In context, a value of 100 means that the element's width will stretch to cover the entire width of the viewport.

Resetting factory templates

In case you made modifications to the factory templates and you would like to revert them.

Or in case you want to make sure a project created in previous releases, is updated to the latest available factory templates.

You can go to the Asset Library > Generated Project Assets > UI Templates > Reset to Default

This will provide you a dialog with the option to select the modified templates you would like to reset to factory settings.

In case you would like to apply the reset settings to a step where this template was previously used, be sure to also "Reset All Changes" to those steps.

Most important things to remember

Especially when creating new templates from scratch.

• Unit size expressions are “% of viewport width” (vw).
  • Size 50 = 50% of viewport width (in any aspect ratio), even when units are user for height properties, vw is still used as a unit.
    This image shows a left aligned red square with a width and height of 50 (% of the viewport width)

• Flex settings apply to the children of the object, unless these children have absolute positioning
  This image shows 4 vertically aligned children (without absolute positioning settings), as per the parents flex setting.
  
• Absolute positioning will ignore the parents flex settings, but still anchor it relative to its parent.
  This image shows what happens if one of the children in the example above is set to absolute position, excluding it from its parents flex settings.
  
• Padding is adding space inside the bounding box of an object.
• Margin is adding space outside the bounding box of an object.
• Use ctrl + shift + v to paste text unformatted, this is generally recommended as formatted text can cause unwanted behavior.

UI Editor layout

You can now full screen windows, on the top right of the window, we also recommend to do so when working on UI.

New UI Editor sub windows

Watch this tutorial to learn more about the UI Editor workspace and its sub windows:

Page hierarchy

• Automatic Layout Mode
  
  • When enabled (recommended), components have positioning constraints when dragging around the canvas.
  • When disabled (advanced), components can be freely dragged around the canvas. Dragging will automatically set objects to an absolute positioning. Highly recommend to test different preview sizes to validate if your design is still responsive.
  • Watch this tutorial for more detail about Automatic Layout Mode:
    
• Visual representation of the parent/child hierarchy of the UI.
• Parents and children can be dragged.
• Nodes can be renamed.
• The eye icon on the left represents if a node is hidden or not. The node will remain hidden after publishing. This allows you to create intricate UI templates, without needing to expose all of its components all the time and hide and show components as you please.
• The number on the right side of a node represents how many children it has.

Building blocks

• Represents some preset components that you can use when creating custom templates. You can also add these to step UI on top of the original template you selected.
• Building blocks can be dragged and dropped directly onto the Canvas.

When building a template, building blocks can be used to add:

• Empty container: a standard container for content, which could be resized in any way, or even filled with color or gradients.
• Text: For example to add and customize text in a container.
• Image: An alternative to what was previously known as insets. Images will allow adding actions to tap to enlarge as well. As seen in this example:
  
• Video: An alternative to what was previously known as video insets. It allows you to add a video, and a thumbnail that is shown before the video is played. Tapping the image will start playing the video.
  
• Audio: An alternative to what was previously known as audio insets. It allows you to add audio, and a thumbnail that is shown before the audio is played. Tapping the image will start playing the audio.
  
• Camera: An alternative to what was previously known as camera insets. It allows you to add a camera. Tapping the camera will full screen it. You can also choose if the camera show render on top or below the ui canvas, changing this setting could be helpful if you'd want to layer eg. text on top of the camera inset.
  

Toolbar (from left to right)

• Camera icon: Hide or show the current step camera into the background of the Canvas, this can be helpful to evaluate the transparent parts of the UI, as well as previewing how the UI will look, without needing to have the Scene View open.
• Maximize icon: Toggle between "fit to view" and a custom zoom that will default to 100% px preview resolution.
• Display preview UI presets
  We recommend to test your UI, especially when you custom modify it, with multiple presets that have different aspect ratios and resolutions. 
  
  
  • Desktop HD (16:9 -  1920x1080px)
  • Desktop 4K (16:9 - 3840x2160px)
  • Phone (19.5:9 - 2532x1170px)
  • Tablet (4:3 - 2160x1620px)
  • HoloLens 2 (38:21 - 760x420px)
• Scale bar: Allows you to create a custom zoom scale for the canvas in case wanted.
• Template name with the ability to swap template: swap your current step template with a different one, changes on the current step UI will be lost.
  
• Actions in a dropdown.
  
  
  • Save as new template: Save your current version of UI as a new template.
  • Reset all changes: Reset your current UI to the template, changes will be lost.
  • Apply changes to source template: Apply the modifications you made to the original template you used. Be aware this might also affect the behavior and look of other steps using the same template.
  • Edit source template: This will allow you to edit the original template separately. Current changes on the step UI will be kept.
• New template: create a new blank template, changes on the current step UI will be lost. Only recommended for advanced users. When creating new templates, be sure to test out your design in different preview resolution sizes, to validate if your design is responsive.
  
  Watch this tutorial to learn more about creating new templates:
  

UI Editor canvas

• Allows for inline editing
• Click to select any component
• Drag and drop to move components

Component properties

Displays contextual properties for the currently selected node(s) (also known as components or elements).

• Top left shows the name of the currently selected node.
• Top right allows you to set different settings for:
  • Normal: default setting, this is the default look/property set of a component.
  • Hover: the properties of a component that is hovered, eg. by a mouse arrow.
    • Not yet supported in the app
  • Active: the properties of a component when eg. a mouse is pressed down, or when a user actively touches a component.
    • Not yet supported in the app

Watch this tutorial to learn more about component properties:

Layout

By default not all settings are exposed, you can add settings with the plus icon on the right.
You can remove them again with the trashcan if you wish to do so.

• 
  W (Width): Defines the horizontal space occupied by an element, expressed in vw (viewport width).
  • Auto: Automatically size the object depending on the size of its children.
  • Fixed: Define a fixed size of the object, expressed in vw.
  • Fill: Automatically size the object depending to the size of its parent.
• H (Height): Defines the vertical space occupied by an element, expressed in vw (viewport width).
  • • Auto: Automatically size the object depending on the size of its children.
    • Fixed: Define a fixed size of the object, expressed in vw.
    • Fill: Automatically size the object depending to the size of its parent.
• 
  Min Width: Specifies the minimum width an element can be, preventing it from resizing below this value. (removable property)
• Max Width: Specifies the maximum width an element can be, preventing it from resizing above this value. (removable property)
• Min Height: Specifies the minimum height an element can be, preventing it from resizing below this value. (removable property)
• Max Height: Specifies the maximum height an element can be, preventing it from resizing above this value. (removable property)
• Flex (removable property)
  Watch this tutorial for more in depth detail:
  
  
  Defines the flex property of an object, which generally applies to the behavior of the children of that object, unless those children have absolute positions applied to them.
  
  • Direction: The icons on the left define the direction in which flex items are placed in the container, with options like row, column and wrap.
    • Row: Positions flex items in a horizontal line from left to right.
    • Column: Positions flex items in a vertical line from top to bottom.
    • Wrap: specifies whether flex items within a flex container should be forced onto one line or can wrap onto multiple lines when there is insufficient space to display them in a single line.
  • Align: The icons on the right allow you to align content and define the start of the flex direction. 
    • Top left
    • Top center
    • Top right
    • Left middle
    • Center
    • Right middle
    • Bottom left
    • Bottom center
    • Bottom right
• Padding
  
  Adds space inside the bounding box of the selected object, with individual properties for top, right, bottom, and left padding to control spacing within the element.
  By default, two properties are shown: Top/bottom and left/right.
  The button on the right allows you to expand the settings, so you can control top, bottom, left and right individually.
• Margin (removable property)
  
  Adds space outside the bounding box of the selected object, with individual properties for top, right, bottom, and left margins to control spacing in each direction.
• Absolute Position (removable property)
  Watch this tutorial for more information.
  
  Absolute positioning will ignore the parents flex settings, but still anchor it relative to its parent. So it removes an element from the normal document flow and positions it at a specific location within its closest positioned parent. The position is determined using the top, right, bottom, left and center properties relative to the edges of the parent. If no parents exist, it positions relative to the UI body. This allows precise control over the layout but does not affect the position of other elements.
  • The X and Y values allow you to offset the anchor position defined by the anchor orientation settings.
• Scrolling (removable property)
  
  Allows you to add a horizontal or a vertical scrollbar to your object.
• Scale (removable property)
  
  Allows you to add a scale property to an element. Generally this is useful for creating hover states, where a mouse over hover state would size the object to 110% for example, while the default stays at 100% (=respecting the original width and height vw size).
• Smart Identifier (removable property)
  
  When this property is enabled, it can be used to overwrite and keep data in various situations.
  When importing an RBOP, it will be used as a locator for placing description text coming from the RBOP steps.
  In the future, we also plan this identifier, to allow you to keep description text, even when switching templates or resetting them.
  We might also consider using this identifier for porting description text from the Legacy UI Editor to the new UI Editor.

Style

By default not all settings are exposed, you can add settings with the plus icon on the right.
You can remove them again with the trashcan if you wish to do so.

• Background color
  
  Allows you to set:
  • No fill
  • A solid color, and it's transparency value
    • 100% = opaque
    • 0% = fully transparent
  • A linear gradient color
    • The color picker allows you to add colors and modify their position and color.
    • It also allows you to set the angle of the linear gradient.
  • An image to use as a background image of your object.
• Corner radius
  
  
  • By default, it allows you to define a universal corner radius for all corners, expressed in vw.
  • Clicking the icon on the right allows you to modify each corner's radius individually.
• Stroke (Removable property)
  
  
  • Allows you to set a thickness, expressed in vw.
  • Allows you to have a solid stroke, dashed or dotted stroke.
  • You can define the color of the stroke, as well as the transparency value of it.
• Shadow (Removable property)
  
  
  • X and Y define the offset of the shadow relative to the edges of the object, expressed in vw.
  • B is the blur value on the edge of the shadow, expressed in in vw. For example, for a value of 1 the blur will be as wide as 1% of the viewport width.
  • S is the offset spread value relative to the shape of the object, expressed in vw.
  • You can define the color and its transparency.
  • The dropdown allows you to offset the shadow outward or inward relative to the object's shape.

When selecting text, the Style section will display relevant settings

• Font type
• Font size (expressed in vw (viewport width = 2% of the viewport width))
• Font style
• Letter spacing
• Line height
• Alignment
  • left
  • center
  • right
• Color
• Opacity

Tip: when pasting text from other documents, it is recommended to use unformatted text. You can use Control+Shift+V to paste unformatted text (as opposed to pasting Control+V for pasting formatted text).

Actions

Allows a user to set actions to a component.

• Go To Step: Click will result in moving to a specified step.
• Next step: move to the next step.
• Previous step: move to the previous step:
• Open URL: open a URL
• Finish procedure: click will close the procedure in app and move the user back to the scenario selection page.
• Scenario link: allows a user to move to a different scenario. It will close the current scenario and move to a different on in the app. Simulation mode in Create will not close the current project.
• Retry quiz: allows a user to retry a quiz in progress (not fully supported yet in the new UI Editor)
• Complete quiz: allows a user to complete a quiz (not fully supported yet in the new UI Editor)
• Full Screen: available for images, allows you to full screen an image by tapping it.

Special properties

Some properties are unique to specific building blocks.

• Image
  
  Allows an author to use an image as the object's content, it can be visually similar, but this is different from using an image as a background in a text object for example.
• Audio
  
  Allows an author to set a thumbnail and corresponding audio to play when a user interacts with this object.
• Video
  
  Allows an author to set a video with a corresponding thumbnail.
  Interacting with this thumbnail will result in playing the video full screen.
• Camera
  
  Allows an author to define a specific camera as the visual content of an object. In the old UI system, we referred to this as camera insets.
  Ensure the aspect ratio of the camera and the object's dimensions are the same.
  When a user interacts with this object, the camera view will display full screen. Tap again to minimize.

• •