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.

1. 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
2. Click + Web Application, or the Create Web Application icon (), in the Web Apps pane.
3. 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.
   
   

   
   Description of the illustration webapp-appnav-createdialog.png

   
   
4. 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.
5. 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.

6. Click Create.

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).

Irrespective of the template used, all web apps include reusable fragments that define common components that appear throughout your application. Fragments prefixed by shell- provide a common set of interactions throughout your application and helps users navigate and interact with your UI:

• The shell-header defines 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-footer defines informational components, such as contact details and copyright information, and appears at the bottom of the browser.
• The shell-drawer is 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:

Description of the illustration responsive-web-app.png

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.