In ONEWEB, Page Designer is used to create pages. Page Designer is a powerful and feature-rich tool that allows the user to create HTML web page/website or a mobile application, without the need to learn the HTML language or web design skills. It uses a simple drag and drop user interface to build web pages or mobile pages based on a grid based system that uses a series of containers, rows, and columns for layout and content alignment.

Menu Controls are an important part of any application. It summarizes the different control or configurations options available to the user to create the pages as per their design. The menu controls for a web application and a mobile application are different inside a Page Designer. The following section explains the main controls available to the user depending on the type of application he chooses to create.

Currently ONEWEB do not have the feature to create Menu for Web Pages. But there is built in template to build menu on Mobile Application.

For Mobile Application, menu is configured as a separate page. Use the Drawer page type to create the menu page and then link the other pages to each menu item.

Go to Mobile App.

Click on Create New Page icon

Enter the page name and choose "Drawer" as page type. Click Start Design

System automatically create a sample menu page.

User can customize the menu according to their requirements.

Users can also add more features such as default page to the menu at the Splitter element level

To create an application on AppSpace first login to AppSpace and click on the Create new app button.

When creating an application, user can create it as a Web Application or a Mobile App. Choose the Mobile platform for your application and enter the details.

Click on Create button to start creating components in your application. System will redirect user to the components page.

Click on Create Pages icon.

Enter page details and click Start Design to redirect to Page Designer.

In this section we will learn how to create a page from scratch. From version 4.0.0.19 and higher user can create an Application only from AppSpace. User can then create a Page inside the Application. Once the page is created, AppSpace will redirect you to Page Designer to design the page.

In this section we will show how to Create the App and create a page in the App for both Web as well as Mobile Application

To create an application on AppSpace first login to AppSpace and click on the Create new app button.

When creating an application, user can create it as a Web Application or a Mobile App. Choose the WEB platform for your application and enter the details.

Click on Create New Application button to start creating components in your application. System will redirect user to the components page.

Click on Create Pages icon.

Enter page details and click Start Design to redirect to Page Designer.

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

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:

Click on the element you want to remove. An options menu will appear above the element. Click the delete icon .

You will be asked to confirm if you really want to delete this element. Click Yes, delete it to delete your element.

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.

Below table represents above highlighted icons and their significance.

Drag Handle: Use this to drag the component to a different location.

Parent Container: Use this to select the parent container. You can go up the hierarchy using this tool.

Duplicate: Copy and duplicate the selected component.

Edit: Use this to write, edit or change content of this component. This tool is usually available only for text components like label, text etc.

Connect to Data: Connect to data from Microflow or store or local database to create dynamic contents.

Translation: To map the text to the key for showing multiple language in the page.

Delete: Remove the component from your web page.

Page Designer Parameter is use for pass parameter between pages and use for connect parameter from microflow. User can create Page Designer Parameter by click at page state on tool bar on top.

Modal Page Designer Parameter will appear, Click on Page Designer Parameter will have icon add parameter appear click for create parameter.

Click Add Field, will have form for insert data information, Insert Field nam and click submit, If user would like to create many parameter can click at Add Field button again for add form.

Click at icon save for save.

Page Designer is available under DEV ZONE in the ONEWEB MENU bar. When user clicks on Page Designer menu, system displays Page List screen to show all existing pages which was created early using Page Designer. On this screen it allows the Page Owner/Editor to edit any of their respective pages and an ordinary user to make a clone of any existing page by using simple Edit and Clone icons highlighted under Tools Column below:

Page Designer also displays the list of all applications developed using Page designer under the App List. User can navigate to App List by clicking on "App List" button.

When user drag any element from the component panel to the design panel a blue outline will be shown to display the borders for the element already present on the design panel. There will also be a small blue arrow to show to which side of the existing element does the new element be placed.

The above diagram shows the blue arrow to the right of login button indicating that the new element will be placed to the right of login button. If the blue arrow is shown at the right, then the element will be placed below the existing element. You can drag the element across the design panel to choose the correct location to place the element.

To place an element within a container, drop the element when the container border is highlighted in orange and there is no arrow to any side.

To add any new element, drag the element icon from the component panel to the area on your page where you want to place it. A new element will appear on the design panel where you dropped it. You can still move this element using the drag handle icon as per your needs.

You can drag paragraphs, headings, and all the other elements in your component panel.

Once your image is listed in the image menu, simply drag it to the location you want to place it on your page.

You can adjust the filter type of the picture. to suit your needs

After selecting the filter type for your image, You can adjust the opacity of the image by sliding the Opacity tab. and fill in the opacity data to suit your needs

You can resize the image by adjusting width and height to fit your needs.

Click on Image Menu on Page Designer to see list of images. You can upload image by click on Upload Image button then select the image that you want to upload from external hard drive location or user can also simply drag and drop any image inside this panel.

Follow the below steps to add a link to redirect from your component to another page within application, third party website using URL, e-mail form, telephone number or modal dialogue.

Click the specific component that you want to turn into a link.

Select type for linking Route, URL, Mail, Tel, or Modal

Choose the Page/ Modal or enter the URL, Mail id, Telephone number that you want to link to inside the address box provided.

User can also add dynamic links based on values from Store or State using the double braces syntax.

This section will show you how to style the block of text. To change the styles of text across your web page please see Font Sets and Font Styles.

Simply click the text you would like to format.

You can see the text style options menu opened of the left side menu panel. Choose how you would like to re-format your text.

1, 2, 3 > Formatting Tools: To adjust the font, shade and font size of your text.

4, 5 > Styling Tool: Adjust the style of your text from 3 available options - Italic, Underline and Strike through style. You could also select text to display in upper case, start case and lower case letters.

6, 7, 8 > Justify Text: Choose how to align your text (right, left or center) within the text box. User can set either text Indent or column count style to adjust text inside text box.

6 > Text Indent is set to 60% for chosen text box.

7 > Text Column is set to 4 for chosen text box.

8 > Text Alignment is set as 'Center' for chosen text box.

9 > Text Color: Adjust the color of your text.

Example: Text Color is set as blue for chosen text box.

10 > Text Style: Set the style to text such as Header Level 1-6, Paragraph normal and Label

11 > White-space : Normal - Sequences of white space are collapsed.

Nowrap - Collapses white space as for normal, but suppresses line breaks (text wrapping)

12 > Truncate : Value of line collapse

Text box measurement: Adjust width and height of your text box.

Click the text you want to edit. An options menu will appear above the text. Click an Edit Icon to open the text in edit mode.

Enter your new text in the box.

Page Designer has a type of container called “Tab” that helps you to setup tab navigation on web pages. Drag tab from component menu and drop into a space that you want to use tab navigation.

There are several additional options you can create for most elements. Below settings are shown in reference to text, but they are applicable for most other elements as well.

Background: Adding colors or image in your text block as background.

Border: Adjust or add border line with properties like width, style, and color of border and border radius.

Appearance:

Opacity: Adjust or add opacity in your text block by using Opacity feature. Opacity is set as100 for text block by default, but you can manually set it from 0-100 as per needs.

Below is an example to compare 50/100 opacity settings for your text block.

Padding and Margin: Adjust the appearance of your text block and add margins using padding and margin feature. These features are used to generate space around content. The padding adds padding around the content (inside the border) of an element. Using this feature, you can have full control over the padding for each side of an element (top, right, bottom, and left). The margin properties set the size of the white space outside the border. Using this feature, you can have full control over the margins for each side of an element (top, right, bottom, and left).

You can manually add values in top, right, bottom, and left sections to align an element on your web-page according to your design.

Box shadow: You can adjust the box shadow style by selecting the type "Outset" or "Inset" and set other settings as desired by the user.

For Web Application, tabs are configured as a component on the page. Use the Tabs component under layout to create the tabs on the page.

Select the LAYOUT section from the Component Menu.

Drag an empty row to an area where you would like to create Tab.

Drag a tab inside the row.

User can customize it according to their requirements. Use Show Tab button to switch between tab contents. Use Add and Remove to add more tabs or remove existing tabs.

To delete tabs on web pages

You will be asked to confirm if you really want to delete Tab. Click Yes to delete your Tab.

For Mobile Application, tabs are configured as a separate page. Use the Tabs page type to create the tab page and then link the other pages to each tab.

Go to Mobile App.

Click on Create New Page icon

Enter the page name and choose "Tabs" as page type. Click Start Design

System automatically create a sample tabs menu page.

User can customize the tabs according to their requirements.

Users can also add more features such as position, swiping etc. to the tab menu at the Tab Bar element level