Web Pages
Last updated
Last updated
Panel and other settings:
Page Designer has 7 main menu icons on the left side of your work page for a Web Application.
- Add Components
- UI Kits
- Open Tools
- Pages
- Structure
- Upload Image
- Manage Icon
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 web pages such as Text components, Media, Chart, UIForm and Layout. The Components Section is divided into 5 sub-sections as shown below
TEXT
Text section provides options such as paragraph, simple text, heading, label or span
MEDIA
Media section contains the components like image, and QR code.
CHART
The chart section consists of components that display data chart in various formats such as line chart, bar chart, and pie chart, etc.
UIFORM
UIForm section contains the components to create an input form on page. Textarea, combo box, form, button, textbox, submit, radio, checkbox, and progressbar.
LAYOUT
Layout section contains the different types of html containers to be used such as container, embed, panel, table, grid, row, tabs, card, accordion, carousel and modal.
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
NOTE: More details on selecting fonts, box size and other background appearance settings for Text and Images are described separately in section: Formatting a block of Text/Image
Pages
Structure
Page Designer displays the Structure menu item as shown, showing the structure of user designed content on Page Content.
Upload Image
Manage Icon
Other Settings:
In addition to above settings, Page Designer provides a list of menu settings on top of your working page. There is a list of settings numbered from 1 to 10 as described below:
Note: It's 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 tools menu to add dynamic functionality to the web page. There are three main tabs in the Tools panel.
- is used to manage data flow to integrate your page with Microflow or JavaScript to produce dynamic contents. When user selects Microflow, user can specify the Event name, the Microflow service, Project Name and refresh contents using Data Flow Manager.
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 the component, user can also add the CSS class name that user wants to map to the component. And user can add directive.
- is used to expand the style menu to set force element style, choose the text font, text sizes, border, overall appearance, and background of your component and working page etc. 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 to add images to the web page. User can drag images from the local system to the image panel or click icon button to add images to the Page Designer. Once added to Page Designer, user can then drag it to anywhere on the design panel to create the web page or use it as the background image for the containers on the page.
Page Designer provides an Manage icon to add custom icons to the web page. User can drag icons from the local system to the icon panel or click icon to add icon to the Page Designer. Once added to Page Designer, user can then drag it to anywhere on the design panel to create the web page.
is to open the Page Setting. User can use it to set the page to be homepage, edit page name and structure, or create page objects
is used to Save your Page.
is the part that connects the variables. Used to send information within the Page Designer app.
Within page state it is possible to click import parameter from microflow. If microflow is available within the app.
is used to create your pa ge as suitable for desktop screen with width 1440px, to display it on desktop widescreen.
is used to create your page as suitable for desktop screen with width 1199px, to display it on Laptop HD screen.
is used to create your page as suitable for screens with width 991px, to display it on iPad or tabs. in the normal screen size.
is used to create your page as suitable for screens with width 575px, to display it on Mobile devices. in the small screen size.
is used to create your page as suitable for screens with width 378px, to display it on Mobile devices size.
is used to to zoom in and zoom out your Page.
is used to open the screen to setup the keys for Translation Mapping
is chatbot on ONEWEB
is use to switch enable or disable of Rulers, Grid background, and Layout grids.
click to see an example of a user-designed page.
is used to 'Preview' or building your web application.
is used exit out to Landing page
