Create a mobile application

Procedure

1. Create a project. For instructions, see Projects.

2. On the project Home page, under Project development, select Mobile application.

3. Click New above the application list.

4. In the Create Mobile Application dialog box, enter an Application Name and a Description, and click Confirm.

   To view the description of a configuration item, hover over the help icon next to it.

After you create the application, the mobile application editor opens automatically. The sections below describe the editor's functional areas.

The mobile application editor is divided into several functional areas. The canvas is at the center. The left panel contains the Pages panel for managing the page tree, and the Layers, Components, Data Sources, and Settings tabs. The right panel is for configuring page properties, including settings for Set as Homepage, Display the top navigation bar on the page, logon-free access, Access Control, Configure App Navigation, Background Color, and Background Image. The top toolbar provides controls such as Undo, Redo, Preview, Verify, Publish, and Save. The bottom status bar provides options for View, Rulers, and Grids.

Functional areas

• Left navigation bar

  Category	Description
  	Pages. Displays a list of pages in the current application. The editor adds a blank page by default. See Pages for more information.
  	Components. Displays a list of components available for mobile visual development. See Components for more information.
  	Application Settings. Displays the following settings for the application: Application Authentication: Enable account or token-based application authentication. For details, see Application Authentication. Domain Name Management: Manage the domain names associated with the application. For details, see Domain Name Management. Basic Information: Update the application name and description. Release History: View the application's release history.

• Canvas

  The canvas area is in the center of the editor. Below the canvas, you can select Ruler and Grid.

• Right-side configuration panel

  Category	Description
  Style	Configure the appearance of the application page or its components. For component-specific configurations, see the documentation for each component.
  	Configure the data source for a component. The available data sources vary by component. You can configure a component with multiple data sources.
  Interaction	Configure event-driven actions for components based on events such as value changes, clicks, or long presses. Configuring component interactions works the same way as in Web Visual Development. For more information, see Interaction Configuration.

• Top navigation bar

  The following table describes the items on the top navigation bar of the mobile application editor, from left to right.

  Item	Description
  	Hover over this icon to expand the project overview. Here, you can view and manage applications, products, and devices within the project. Click View All Projects to go to the IoT Studio Project Management page. Click View All to go to the details page of the project that contains the current application. To the right of the icon, the current project and application are displayed as Project Name-Application Name.
  Auto-saved	Displays the time when the application configuration was last auto-saved.
  	Undoes the last action.
  	Redoes an undone action.
  	Previews the application at any time during the editing process.
  	Manually saves the current configuration. The system also saves automatically every minute.
  	Publishes the application to the cloud.
  	Opens a menu to view My Tickets or Create Ticket.
  	Opens the help documentation for visual application development.