App Editor

Overview

The App Editor allows you to create, view, and edit app versions. These app versions can be created in real-time by multiple Tulip users.

An app version is a series of steps, or screens of content, that can be used by an operator running the Tulip Player on a desktop, tablet or mobile phone.

After an app version is published, it is immediately available to all devices that are allowed to run the “latest published version” of an app.

Model/Page Connections

Color Palette

View

• When a user attempts to edit a Color variable or any widget with color options, they will see all colors from the Color Palette

Navigation Options

View

• A collection of options allowing for easier viewing of the App Editor.

App Version

Edit

• The App Editor’s primary purpose is editing an app’s “development” version. Almost every button on the screen will allow you to change the app version by modifying the Models within that app version.

View

• You can view the entire app version by clicking each step on the left side of the screen

Create

• A new version of the app can be “published”, or created, by pressing the “Publish” button in the top right corner of the screen.

Analysis

View

• A user can view the live version of an Analysis by looking at an Analysis that is embedded in a Step
• A user can view all Analyses across all apps from the Embedded Analysis Widget

Step Group

Create

• A user can create a new Step Group by clicking the “Add” button in the top left of the screen and choosing Step Group

Edit

• A user can edit a step group by dragging new steps underneath it in the list on the left side of the screen
• A user can edit the name of the step group by double clicking the name on the left side of the screen

View

• A user can view all step groups within the app version by scrolling through the list of steps and step groups on the left side of the screen

Delete

• A step group can be deleted by selecting the Step Group from the left side panel, then pressing the “Trash’ icon in the right context pane.

Asset Library

The asset library is a library of static shapes that can be added to an app as an aid to the operator.

View

• You can view the Asset Library by clicking the “Assets” button at the top of the screen in the Widget Bar.

Regular Step

Create

• A user can create a new Regular Step by clicking the Step in the list on the left side of the screen and then pressing "cmd/ctrl + Enter".
• A user can create a new Regular Step by clicking the "Add" button in the top left of the screen and selecting 'Step'.
• A user can duplicate a Regular Step by:
  • Clicking Step from the list in the left side panel and then pressing the “gear” icon within the right Context Pane and then choosing "Duplicate Step"
  • Right clicking a step and selecting 'Duplicate'
  • Selecting a step and pressing 'cmd/ctrl + D'

Edit

• A step contains a series of Widgets. A user can edit the widgets on the step by selecting the Step from the list on the left side of the screen.
• A user can edit the details of the step in the panel on the right side of the screen after selecting the step. It can also change its relationship to the content on the "Base Layout" template within the app.

View

• A user can view all Regular Steps within the app version by scrolling through the list of steps and step groups in the left side panel of the editor.

Delete

• A Regular Step can be deleted by:
  • Selecting the step in the left side panel, then pressing the “gear’ icon in the right context pane and choosing "Delete Step"
  • Right clicking on the Step and choosing 'Delete'
  • Selecting the Step and pressing 'cmd/ctrl + Delete' on the keyboard.

Form Step

Create

• A user can create a new Form Step by clicking the “Add” button in the top right of the screen and choosing Form Step
• A user can create a new Form Step by clicking the Form Step in the list on the left side of the screen and then pressing the “Duplicate” icon on the right side of the screen

Edit

• A step contains a series of Widgets. A user can edit the widgets on the step after selecting the Step from the list in the left side panel.
• A user can edit the details of the step in right context pane after selecting the step.

View

• A user can view all Form Steps within the app version by scrolling through the list of steps and step groups on the left side of the screen

Delete

• A Form Step can be deleted by selecting the step on the left side of the screen, then pressing the “Trash’ icon on the right side of the screen

Approval Step

Create

• Approval Steps are only available on “Enterprise” plans
• A user can create a new Approval Step by clicking the “Add” button in the top right of the screen and choosing Signature Form
• A user can create a new Approval Step by clicking the Signature Form in the list on the left side of the screen and then pressing the “Duplicate” icon on the right side of the screen

Edit

• A step contains a series of Widgets. A user can edit the widgets on the step after selecting the Step from the list on the left side of the screen.
• A user can edit the details of the step in the panel on the right side of the screen after selecting the step.

View

• A user can view all Approval Steps within the app version by scrolling through the list of steps and step groups on the left side of the screen

Delete

• An Approval Step can be deleted by selecting the step on the left side of the screen, then pressing the “Trash’ icon on the right side of the screen

Widget

Create

• A widget can be created by selecting any icon from the “Widget Bar” at the top of the screen, and then clicking a widget from the menu that appears. This will automatically add the widget to the step.
• A widget can be duplicated by:
  • Selecting the widget in the left side panel and pressing 'cmd/ctrl + D' on the keyboard.
  • Select one or multiple widgets in the app editor and hold 'alt/option' while dragging.
  • Right clicking on the widget in the left side panel and choosing 'Duplicate'.

Edit

• After adding a widget to a step, a user can click the widget. A series of customization options will appear on the right side of the screen.
• A widget can be resized by dragging any of the corners after it is embedded on the step.
• A widget can be rotated by dragging after hovering on any of the corners until a rotate icon is visible.
• A widget can be constrained to up/down/left/right directions by holding 'shift' while dragging.

View

• When a user is viewing a specific step, all widgets on that step will be displayed.

Delete

• A widget can be deleted by:
  • Clicking the widget and then pressing “Delete” on the keyboard.
  • Clicking the widget and then pressing the “Trash” icon that appears on the right side of the screen.
  • Right clicking on the widget in the left side panel and choosing 'Delete'

Variable

Create

• A variable can be created via the “Variable” dropdown on the right side of the screen, which appears in a variety of widgets
• A variable can be created by clicking the “App” menu on the right side of the screen, then choosing the “Variables” option from the resulting options. This will open a modal where new variables can be created.
• A variable can be created by duplicating another trigger. This can be done by clicking 'Duplicate' within the '...' menu for a trigger.

Edit

• A variable can be edited by clicking the “App” menu on the right side of the screen, then choosing the “Variables” option from the resulting options. After that, a list of variables in the app version will be shown. A user can click any name of a variable to edit the name.
• A user can edit the “default value” using the “Default Value” column in the screen above.

View

• A list of all variables in the app version can be viewed by clicking the “App” menu on the right side of the screen, then choosing the “Variables” option from the resulting options.

Delete

• A variable can be deleted when it is not included in any triggers by clicking 'Delete' within the '...' menu for a trigger.

Record Placeholder

Create

• A user can create a Record Placeholder by selecting the “Records” tab on the left side of the screen and then choosing a specific table. Then, they can click the "+" button next to the “Record Placeholder” title.

Edit

• After a Record Placeholder has been created, a user can edit the name by clicking the name of the Record Placeholder from the list of Record Placeholders in the “Records” tab on the left side of the screen.

View

• A user can view all Record Placeholders under the “Records” tab on the left side of the screen.

Delete

• A Record Placeholder can be deleted after it is not referenced in any triggers. To delete the Record Placeholder, click its name and then choose the “Delete” button from the resulting menu.

Table Query Placeholder

Create

• A user can create a Table Query Placeholder by selecting the “Records” tab on the left side of the screen and then choosing a specific table. Then, they can click the "+" button next to the “Query” title.

Edit

• After a Table Query Placeholder has been created, a user can edit the name by clicking the name of the Query Placeholder from the list of Query Placeholders in the “Records” tab on the left side of the screen.

View

• A user can view all Query Placeholders under the “Records” tab on the left side of the screen.

Delete

• A Query Placeholder can be deleted after it is not referenced in any triggers. To delete the Query Placeholder, click its name and then choose the “Delete” button from the resulting menu.

Table Aggregation Instance

Create

• A user can create a Table Aggregation Instance by selecting the “Records” tab on the left side of the screen and then choosing a specific table. Then, they must add a preexisting Table Query as a Table Query Placeholder. Then, they can click the "+Add Aggregation" button to add an aggregation to that Query Placeholder.

Edit

• After a Table Aggregation Instance has been created, a user can edit the name by clicking the name of the Aggregation Instance in the “Records” tab on the left side of the screen.

View

• A user can view all Aggregation Instances related to each Table Query Placeholder under the “Records” tab on the left side of the screen.

Delete

• An Aggregation Instance can be deleted after it is not referenced in any triggers. To delete the Aggregation Instance, click its name and then choose the “Delete” button from the resulting menu.

Table Record

View

• A Table Record can be viewed by selecting the “Embedded Table” widget under the “Embed” option in the “Widget Bar”. Then, after choosing a Table and the relevant Table Fields from the menu on the right side of the screen, a user can see all records from the Table.

Table Fields

View

• Table Fields can be viewed by selecting the “Embedded Tulip Table” widget under the “Embed” option in the “Widget Bar”. Then, after choosing a Table, a user can see all Table Fields for that Table in the dropdown under the “Columns” label.

Triggers

Create

• A trigger can be created by clicking on a Widget that is already available on a step, and then pressing the “+ (plus)” button next to the “Triggers” label on the right side of the screen.
• A trigger can be created by clicking on a “Step” item on the left side of the screen, and then clicking “Add” next to any of the trigger types listed.
• A trigger can be copied to the clipboard by clicking the "copy" icon next to the trigger name. Typing Ctrl/Cmd+V while selecting a similar item (e.g. button or step) will paste the copy to that item.

Edit

• A trigger can be edited by clicking on an existing trigger listed in either the “Widget” or “Step” tab on the right side of the screen.
• A trigger can be “cut" by pressing the “scissors” icon next to the trigger name. This will remove the trigger from the step or widget and add it to the clipboard.
• A trigger can be enabled or disabled by toggling the slider next to the name. A trigger will not run when disabled.

View

• Triggers are attached to either steps or individual widgets. You can see a list of all attached triggers by clicking the step or button, and then viewing the list of triggers that appears on the right side of the screen.

Pages

The following Pages are related to managing apps:

• App overview
• App dashboard
• App versions
• App completions
• App permissions
• App approvals

The following pages can be accessed at the top of the page for the purpose of testing apps:

• Tulip Player
• Developer Mode

App Translations

The app editor allows to manually translate text within Tulip apps into multiple languages. Translated apps will be shown in each operator’s selected profile language, if the app is available in that language. Otherwise they are shown the "original language" of the app.

Translations can be added within the app editor for each widget/element (“in situ”). This specifically includes:

• Widgets
  • Text widgets
  • Button widgets
• Labels of table fields and object properties in interactive table widgets, variable widgets and table record widgets.

Apps that have translations enabled can be edited (e.g. moving a widget) in any of the languages. Changes will reflect across translations.

Additionally, the following "App Info" variables are available in apps with translations:

• App’s displayed language
• Operator’s preferred language

Enable

• Translations can be enabled for an app in the App Editor by clicking on the "Enable Translation" button at the top right of the page.
• The "Original Lanugage", i.e. the language the app was built in and the current language of all text, as well as any additional lanugages that should be used for the app need to be selected. The available languages are the same as available for the Tulip platform:
  • English
  • German
  • Spanish
  • French
  • Italian
  • Japanese
  • Chinese
  • Polish
• By clicking "Save", translations are enabled for the app.
• The "Enable Translation" button changes to a dropdown menu allowing to switch to any of the languages selected in the modal.

Create

• To create/add a translations for a widget, the following steps are required:
  • Use the language dropdown to switch to the desired language
  • Select the to-be-translated widget/element (see above for supported widgets/elements)
  • Enter the translated text into the relevant input field for the widget/element (e.g. the label input for a button)
• The original language text is always shown next to the input field for reference
• Widgets/elements that are missing a translation in the currently selected language are highlighted by an orange (i) icon in the top right corner of the widget
• If a new widget is added while viewing a language different to the "original lanugage", a modal prompts the user to first enter the original language text to keep the original language complete at all times.

Edit:

• Languages can be edited by clicking on the "Edit Languages" option in the language dropdown. This allows to:
  • Add additional lanugages by clicking on "Select a language" and selecting the respective lanugage
  • Change to another original language by selecting it in the dropdown menu for "Original Lanugage".
    • If the newly selected original language is missing translated text for one/multiple widgets, a warning is shown. The user can still decide to use that language as the new original lanugage.
• Individual translations for widgets/elements can be edited the same way they are created, by selecting the widget and editing the text in the relevant input field.

Delete:

• Languages can be deactivated by clicking on the "Edit Languages" option in the language dropdown. This allows to:
  • Deactivate additional lanugages by clicking on the "x" next to a language. This will not delete any of the translations for that language, but only make them unavailable for use in that version of the app. Re-adding the language later will show the already entered tranlsations again.
  • Deactivate translations for the app by clicking on "Deactivate Translations". Two options are available for deactivation:
    • Archive translations: This persists any translated content for this app. It will be available in case translations are re-activated for this app in the future.
    • Delete all translations: This permanently deletes all translated content and resets any translation-related settings to before translations were initially activated for this app.
• Individual translations for widgets/elements can be deleted by deleting any input from the relevant input field. If this is done, the original language text will be shown again for the widget/element.

User Permissions

App editing permissions may be restricted by the app creator, the user who originally created the app. The rules around restricting app editing are described in App Permissions.

Tests

Requirements