Once you have an accessible data source, you can create one or more modules to interact with that information:
1. From the app design page, click + Add Module. This opens the Add Module dialog box.
2. Enter a Name for the module. The name cannot contain spaces. Only letters, numbers, dashes, and underscores are permitted.
Note: Once entered and saved, the name of the module cannot be edited.
3. (Optional) Expand the Icon/Color palette to select a different icon, icon color, and icon background color.
4. (Optional) Enter a Label for the module. The label can contain spaces and is used to identify the module on the landing page at run time. If you do not specify a label, the module is identified using its Name.
5. (Optional) Add a brief Description. This will appear under the module's name on the app design page and as a tooltip for the module in the generated web app.
6. (Optional) Click Roles to display a list of user roles that you can use to determine the authorization of authenticated users to access this module at run time. If you want to specify roles to determine this authorization for every authenticated user, select one or more of the listed roles. For information on adding roles to this list and enabling them to authorize users, see Using roles to authorize user access.
7. Click Add Module to save the new module. This adds a module card to the end of the Modules list.
Later on, you can change some of these settings by clicking the gear menu on its module card. This provides the following options:
Properties: This opens an Edit Module dialog box, which is similar to the Add Module dialog box where you can change all of the initial module settings except Name.
Delete: This deletes the module and all views you have created for it.
Note: This option does not appear for the built-in Application module card, which you cannot delete.
The next step in creating your module is to add one or more views. To add or edit existing views, click anywhere on the module card (except the gear menu). This opens the view design page, where you can:
Add a view to the list in the VIEWS pane in the left-hand panel by clicking + Add View, or edit an existing view in the list by selecting that view. Either action opens a design-time view simulation in the middle view design panel and displays VIEW STYLES and VIEW PROPERTIES panes in the right-hand panel.
The VIEW STYLES pane provides an Edit CSS button that enables you to add and edit CSS styles for the view. Clicking the Edit CSS button opens the view's style.css file in a Monaco editor. The style.cssfile is located in application-folder\app\src\modules\module-folder\view-folder, where application-folder is the path to the folder that contains and is named for your web app, module-folder is the name of the folder defining the module, and view-folder is the name of the folder defining the view.
Note: To apply CSS classes (defined in the style.css file) to the view, you must specify the class names in the CSS Class List property in the VIEW PROPERTIES pane.
The VIEW PROPERTIES pane displays properties that you can set for the view that modify the view's run-time behavior. These property settings can also change the design-time simulation shown in the view design panel, depending on the view.
Note: The exact appearance and options available on these view design page panels change depending on the type of view. For more information, see Adding and editing views.
Save the current view with edits in progress.
Revert the current view to its most-recently saved state.
Generate the HTML and JavaScript source code for the app based on the latest edits, ready to run in preview mode (when you click Preview).
Preview the app, which shows a preview of what the finished app looks like and how it behaves in the default web browser using a webpack-dev-server. Preview runs the latest generation of the web app. If the app has not yet been generated, or requires generation after editing in the Designer, this option automatically generates the app before previewing it.
Publish the app, which generates a deployment image of the HTML and JavaScript source code for the app based on the latest edits, using one of the following deployment options that you choose:
Debug: Test deployment on a web server.
Release: Production deployment on a web server.
Zoom the view design panel between 60% and 100% by 10% increments. You can also scroll this panel horizontally or vertically to maintain visibility with limited screen space. To further adjust view design page, you can resize the left and right panels horizontally by dragging the inside border of each panel or collapse and open each panel by clicking an arrow that appears when hovering at the center of the same border. For some views with additional panes on the left, you can also resize, collapse, and open these panes vertically by dragging the appropriate border between them or by clicking an arrow that appears when hovering at the center of the same border.
Choose a device layout to simulate at design time from the following options in a drop-down menu: Desktop (default), Laptop, Tablet landscape, or Tablet portrait. Selecting an option provides an approximate preview on the view design page (without building the app) of what any given view will look like on a respective desktop, laptop, tablet in landscape mode, or tablet in portrait mode. This can be helpful to see how view rows and columns might break differently when viewed on different devices. Note that CSS styling is not applied to these simulations on the view design page.
Properties: This opens an Edit Module dialog box, which is similar to the Add Module dialog box where you can change all of the initial module settings except Name.