Scribd
Upload
15 views7 pages

Add Web (And Mobile) Apps To Your Visual Application

Add Web (and Mobile) Apps to Your Visual Application

Uploaded by

khiljis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views7 pages

Add Web (And Mobile) Apps To Your Visual Application

Add Web (and Mobile) Apps to Your Visual Application

Uploaded by

khiljis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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:
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:
o Select None to create a web app without any navigational
components, if you want to design the app's navigation on your own
later.
o 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).
o 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.
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.

You might also like