Mobile Pages
Last updated
Last updated
Menu Panel and other settings:
Page Designer has 9 main menu icons on the left side of your work page for a Mobile Application.
- Add Components
- UI Kits
- Open Tools
- Pages
- Structure
- Upload Image
- Manage Icon
- Database Collections
- Theme Designer
Add Component Menu
When user clicks on the Add components icon, system shows the component panel on the properties panel section. Page Designer provides a list of components to add content to create mobile pages which are Text, Mobile and Chart components. The Components Section is divided into 3 sub-sections as shown below
TEXT
Text section provides options such as paragraph, simple text, heading, label or span
MOBILE
Mobile section contains the components to create an input form on page like text area, button, form, input group, radio, checkbox, and the different types of HTML containers to be used such as container, grid, card, and carousel.
CHART
Chart section provides options such as bar, line, pie, area, radar etc.
UI Kits
User customize - It is a part that users can customize. or add functional components yourself It can work as per the following example.
1.Click UI Kits at side bar. And Click tab User Customize .
3.After click icon plus. System show the create component panel on the properties pop up section. Follow the steps as shown in the picture.
4.After clicking the Create button, It's will get the category you selected. Component name as entered. And can drag and drop components into page content.
External UI - This is where the user must import the UI Kits from the landing page tab resource first. It can work as the following picture example.
From the example picture is the procedure for importing UI Kits files from the file explorer.
2.Go into PGD. And Click icon UI Kits at side bar. Click tab External UI.
From the example picture, when UI Kits has been imported, UI Kits will be displayed on the External UI tab. And can drag and drop components into page content.
Open Tools
User can select Microflow to manage data flow to integrate your page with Microflow to produce dynamic contents. User can specify the Event name, the Microflow service, Project Name and refresh contents using Data Flow Manager.
Pages
Structure
Page Designer displays the Structure menu item as shown, showing the structure of user designed content on Page Content.
Upload Image
Manage icom
Database Collections
Other Settings:
In addition to above settings, Page Designer provides a list of menu settings on top of your working mobile page. There is a list of settings numbered from 1 to 9 as described below.
Note: It is always a good practice to save your page after every new configuration change.
When users click on the UI Kits icon , system show the UI KITS panel on th properties panel section.
2.Click design component on page content. And next step click UI Kits at side bar. Click icon plus
1.Come back to the landing page first. By clicking on the button Exit without save. Then click as in the following example.
Page Designer provides a list of tools under the open tools to add dynamic functionality to the mobile page. There are three main tabs in the Tools panel.
- is can be used to integrate page with local database by selecting Database. User can then create new data structure for local database, create data, select data from table to show on page, update the data, and also delete the data from local database.
User can also use it to call any user defined custom functions by selecting JavaScript. User can click on icon and the system will open a JavaScript editor window user can add any JavaScript function here.
- is used to configure Title and ID of component, and add the CSS class name that you want to map to the component.
- is used to expand the style menu to choose the text font, text sizes, border, overall appearance, and background of your component and working page. It is also used for linking the component to another page or external website depending on the type of selected link.
Page Designer displays the Page menu list to show all pages available in the app. Can search for pages by page name. Create a new page by clicking the icon and close the popup by clicking the close icon.
Page Designer provides an Upload image menu to add images to the mobile page. User can drag images from the local system to the image panel or click Upload Image button to add it to the image archives of the Page Designer. Once added to Page Designer, user can then drag it to anywhere from the image panel to the design panel for the mobile page or use it as the background image for the containers on the page.
Page Designer provides an Manage icon menu to add icons to the mobile page. User can drag icons from the local system to the icon panel or click Upload Icon button to add it to the icon archives of the Page Designer. Once added to Page Designer, user can then drag it to anywhere from the icon panel to the design panel of mobile page.
- is used to create local database that is local to your mobile application only. User can use the Interaction and Data Flow menu to integrate the page with Database. For details on how to use it please refer section Local Storage
- is used to open Page Setting that you can setting this page to be homepage, edit page name, or create page object.
- is used to Save your Page.
- is the part that connects the variables. Used to send information within the Page Designer app.
Note: Within page state it is possible to click import parameter from microflow. If microflow is available within the app.
- is used for selecting device screen to be Mobile, Tablet, or configure new screen by yourself.
- is used to rotate screen to portrait or landscape.
- is used to zoom in and zoom out your Page.
- is used to open the screen to setup keys for Translation Mapping
- is chatbot on ONEWEB
- is use to switch enable or disable of Rulers, Grid background, and Mobile Skin.
- click to see an example of a user-designed page.
- is used to 'Play Me' or building your mobile application.
- is used exit out to Landing page.
