EmbedThis

Appearance

App Designer ​

The App Designer is a visual low-code app UI designer so you can easily create stunning mobile and desktop apps to manage your devices. With the App Designer you can create and customize the app's user interface with UI controls, data, theme, colors and logo — all without coding.

Device Page Designer

The App Designer is used to create UI displays, pages, UI navigation and overall app theme. The individual UI pages are constructed using a dashboard canvas upon which UI elements can be positioned and resized to suit your need.

The App Designer supports a drag-drop design pattern where you can select UI controls and widgets from an extensive library of over 30 widgets. There are widgets for graphs, tables, numerics, shapes, gauges, buttons, images, input controls for all types of data entry.

Overview ​

The App Designer has three main components:

  • Display List
  • Page Designer
  • Feature Designer
  • Asset Designer

Displays ​

The App designer supports creating multiple displays for various device types such as mobile, tablet and desktop. You can create a single responsive display that will adapt to each display type and resolution or you can create additional displays for specific device types.

Each display definition contains a JavaScript (like) matching expression that is evaluated at runtime to determine if the display definition should be used on the current device. The expression can access the current device's properties such as agent, width, height, language, version and timezone.

This permits you to create highly tailored display interfaces for specific devices.

App Pages ​

The App Designer enables you to create and modify UI pages for each display. On the Pages tab of the Designer, select the relevant display to view the list of pages. The page list displays the page's UI path, menu name and icon and the UI component used to render the page.

Page Designer

Modifying Pages ​

You can edit the page properties, including definining the page component, by clicking on the page's edit icon. You can add a new page by clicking the Add button and then select the Page component.

Page Edit

Pages must have a UI path and can optionally have an internal name. If a sidebar menu is enabled, the page will be added to the sidebar menu using the given menu icon.

Pages can be secured by specifying a role that must be present in the user's role list. The supported roles are: owner, admin, user, public and inherted. If inherited is specified, the role is inherited from the parent page.

The tab navigation switch controls whether the page has children pages that should be displayed as tabs under the parent page.

Page Designer ​

For pages that utilize the Page component, you can invoke the Page Designer to visually design the page by dragging and dropping widgets onto the page. The DevCore framework provides over 30 widgets to choose from.

Page Designer

Widgets ​

The App Designer composes pages drawing on a library of over 30 widgets including:

Audio, Button, Event, Form, Gauge, Graph, Image, Input, Label, Led, Metric Table, Numeric, Progress, Overview, Shape, Sign, Table, Tabs, Toolbar and more.

Feature Designer ​

The Feature Designer is used to configure the app's supported features. This includes the app's features, such as authentication, navigation, cloud management, and visualization features.

Feature Designer

Asset Designer ​

The Asset Designer permits the upload of additional app assets such as logos, images, favicons, stylesheets and extension VueJS components.

Uploaded assets are visible by all app displays. However, you can configure different displays to utilize assets customized for specific device form factors. For example, you can upload a different logo for a mobile device, or indeed a different logo for light and dark mode.

Asset Designer