General and preview

The Save button is very important and should always be remembered to use before closing, or when you want to preview the changes that you made. A change made in the template editor it is not immediately implemented and is temporary. When you save your changes, they will be implemented and updated in the preview. So when using the modeler with the preview screen open, you should save after an edit. This will refresh your preview and update to the new changes. On some changes the refresh is not properly triggered and you may need a hard refresh on the preview page by refreshing your browser window.

The undo is an obvious must have and will revert changes to the previous state. This will work even after you save your template and as long as you don't close or refresh your browser.

When you are still unsure of your changes, or didn't make a mistake after all, a redo button comes in handy. Just like the undo this is remembered in your session and works as long as you do not refresh your page, even after saving.

The Go-to button gives you an easy way to navigate back to the Interaction node you are working on. It will open a new tab of the flowchart containing the interaction node. When working on big projects this gives you an easy way to find your node and a way back to the correct flowchart.

Unwrap lets you remove a component but keep the content. You select the component you want to remove and use the unwrap node. The selected component will be removed and the content is placed in its location.

Preview size is used to simulate different screen-sizes and to get an impression of how your components and widgets react to the screen-sizes. There are four sizes, the large is for desktops with large screens, medium for standard desktop monitors, small for tablets and extra small for phones.

You can change size to:

  • xs (extra small): for mobile screen sizes (screens less than 768px wide)

  • sm (small): for tablet screen sizes (screens equal to or greater than 768px wide)

  • md (medium): for small laptops (screens equal to or greater than 992px wide)

  • lg (large): for laptops and desktops (screens equal to or greater than 1200px wide)

  • Invisible: you can make a column invisible by clicking on the eye icon

Last updated