> For the complete documentation index, see [llms.txt](https://docs.oneweb.tech/oneweb/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oneweb.tech/oneweb/reference/page-designer-reference/menu-controls-on-pages/web-pages.md).
# Web Pages
**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**
When users click on the UI Kits icon , system show the UI KITS panel on th properties panel section.
**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
2.Click design component on page content. And next step click UI Kits at side bar. Click icon plus 
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.
1.Come back to the landing page first. By clicking on the button Exit without save. Then click as in the following 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**
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.
{% hint style="info" %}
**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
{% endhint %}
**Pages**
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.
**Structure**
Page Designer displays the Structure menu item as shown, showing the structure of user designed content on Page Content**.**
**Upload Image**
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.
**Manage Icon**
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.
**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:
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.
{% hint style="info" %}
**Note**: It's always a good practice to save your page after every new configuration change.
{% endhint %}
is the part that connects the variables. Used to send information within the Page Designer app.
{% hint style="info" %}
Within page state it is possible to click import parameter from microflow. If microflow is available within the app.
{% endhint %}
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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.oneweb.tech/oneweb/reference/page-designer-reference/menu-controls-on-pages/web-pages.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
- 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
, system show the UI KITS panel on th properties panel section.
**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
Exit without save. Then click as in the following example.
icon and close the popup by clicking the close 
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.
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.
{% hint style="info" %}
**Note**: It's always a good practice to save your page after every new configuration change.
{% endhint %}
is the part that connects the variables. Used to send information within the Page Designer app.
{% hint style="info" %}
Within page state it is possible to click 
import parameter from microflow. If microflow is available within the app.
{% endhint %}
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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.oneweb.tech/oneweb/reference/page-designer-reference/menu-controls-on-pages/web-pages.md?ask=