Add Web (and Mobile) Apps to Your Visual Application
A visual application is a container for all your web (and mobile) applications. You can have any numbers of apps in your visual application, even both web and mobile apps in the same visual application.
Create a New Web Application
You can create multiple web apps within your visual application. Each web app is independent, but they can all use the data sources defined in the visual application.
To create a new web application:
- Click Web Applications in the Navigator to open the Web Apps pane.
Structural representations of each web application in your visual application show in the Web Apps pane. If no web applications have been created, you'll see a message and a + Web Application button.
Description of the illustration vbs-create-web-app.png - Click + Web Application, or the Create Web Application icon (
), in the Web Apps pane. - In the Create Web Application dialog box, enter a name in the Application Name field under General Information. The name you enter will be used as the app's display name in the Web Apps pane. You can specify uppercase as well as lowercase characters, but the name will be converted to lowercase.
- Select a navigational style for the app based on the available templates:
- Select None to create a web app without any navigational components, if you want to design the app's navigation on your own later.
- Select Navigation Drawer to create a web app with a Navigation Drawer, which shows the app's main navigation menu in a separate panel (users would get to this navigation menu by clicking
in the application header).
- Select Bottom Tabs to create a web app with a tab bar at the bottom that enables navigation between items.
- If you chose Navigation Drawer or Bottom Tabs, specify a name for each item under Navigation Items. Click Add Item to add as many as you need or
to remove those you don't need. Each navigation item serves to group related pages under a separate flow. A flow can have one or more pages and is typically used to group pages by business function. For example, if you were creating an expenses app, you might have two navigation items: one called My Expense Reports to group the pages that summarize expenses and let users create and edit expense reports, and another called Administration to group the pages where managers approve or reject expense reports.
Your new web app shows up in the Web Apps pane and opens the flowname-start page, created by default as your application's home page. This page is the default page in the default flow (badged as default next to the page and flow) and is what users will first see when the app is run.
Expand the application node in the Web Apps pane to see the app's structure, with nodes and subnodes representing its artifacts and files. For example, here's a tree view of a web app that uses the Navigation Drawer template (with the default navigation items):
Description of the illustration new-web-app-structure.png
Because a flow is generated for each navigation item, you see multiple flows (item-1, item-2, and so on), each with its own starter page (item-1-start, item-2-start, etc). If you chose None as your template, you would see a single page flow (main).
shell- provide a common set of interactions throughout your application and helps users navigate and interact with your UI:
- The
shell-headerdefines the global header which appears as the topmost element in the browser. It includes your company logo, application name, and user profile, besides other actions and utilities. - The
shell-footerdefines informational components, such as contact details and copyright information, and appears at the bottom of the browser. - The
shell-draweris specific to the Navigation Drawer template and defines the items that form the app's navigation menu in a separate panel.
In addition to shell fragments, a page-header fragment defines page-specific content that appears above a page's main content. You would not work with the page-header fragment directly, but you can customize this fragment on your page to create a custom page-level header.
With your app now created, you are ready to design and develop its pages. You might also want to familiarize yourself with the Designer.
Tip:
Web app templates lend themselves to responsive layouts and can adjust to the size of the user's screen, ranging from small phones to wide-screen desktops. Here's an example of a web app that uses the Navigation Drawer template:
When the form factor is changed to a mobile device, notice how the header items move into the drawer panel when the user clicks . Additionally, the application title (My Application in the example) is replaced by the page title (Item 1). The global header (which contains the company logo and application title) is displayed only in desktop mode. To customize your app's navigation items as well as elements in the header and footer, see Edit an App's Header, Footer, and Navigation Items.
Import an Existing Mobile Application
Starting with version 23.10, mobile apps have been replaced by Progressive Web Apps (PWAs). You can no longer create a mobile app, but you can import an existing mobile app and work on it—though you must deploy it as a PWA to be able to use it.
To import an existing mobile app, the recommended approach is to import the visual app containing the mobile app and create a new workspace where you can work on the app. See Create a Workspace by Importing an Application Archive.
When you import a visual application with a mobile app, your mobile app will show up in the Mobile Apps pane (which won't appear otherwise):
Description of the illustration vbs-createmobapp.png
Once you import your mobile app, you can work on it as before, but you must enable PWA support to allow users to install the app on mobile devices. See Run Mobile Applications as PWAs.