Menu Panel and other settings:

Page Desinger has 4 main menu icons on the left side of your work page.

- Add Components

- Tools Menu

- Image Menu

- Page List

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, Images, Forms and Containers. The Components Section is divided into 4 sub-sections as shown below:



  1. USER CUSTOMIZE :

This section contains list of all customized items that user can simply drag and drop on their web pages. Currently this section is in progess and contains only Progress bar.

Note: Will be updated soon in "Page Designer" 1.1 release.


  1. TEXT

Text section provides options such as blockquote, paragraph, simple text, heading, label or span


  1. FORM

Form section contains the components to create an input form on page. Textarea, combo box, form, button, textbox, submit


  1. CONTAINER

Container section contains the different types of html containers to be used such as container, embed, panel, table, grid, row, column, tabs, and div.

Tools Menu

Page Designer provides a list of tools under the tools menu to add dynamic funtionality to the web page. There are four main tabs in the Tools panel.



  1. - is used to create any user defined custom functions. User can click on edit icon and the system will open a JavaScript editor wndow; user can add any JavaScript function here.



  1. - is used to manage data flow to integrate your page with Microflow or third party services to produce dynamic contents. User can specify the Event name, the Microflow service, Project Name and refresh contents using Data Flow Manager.



  1. - is used for data binding, to select the data to bind to each form component on the page. User can click on "Change Store" button (highlighted in blue) to choose from a list of available javascript variables returned from the microflow services, that retrieve data from back end like database or any third party services, to capture and display the contents on their web pages



  1. - is used to expand the style menu to choose the Text font's, text sizes and overall apperance and background of your working Page.



More details on selecting fonts, box size and other background apperance settings for Text and Images are described seperately in section: Formating a block of Text/Image

Image Menu

Page Designer provides an image menu to add images to the web page. User can drag images from the local system to the image panel 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 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 used to Save your Page.  

Note: It's always a good practice to save your page after every new configuration change.


- is used to delete your Page.

Note: The System will display a page number on the confirmation message. If user would like to delete the page, user can enter then page number in the message and can confirm deleting the page.


- is used to display the grid. User can toggle the grid by clicking on it.


- Toggle Whitespace


-  Toggle Outline


- is used to create your page for desktop screen with width 1300px, to display it on big resolution monitor screens.


- is used to create your page for desktop screen with width 1024px, to display it on small resolution monitors.


- is used to create your page with width 768px, to display it on Ipad or tabs


- is used to create your page with width 375px, to display it on Mobile devices.


- is used to to zoom in and zoom out your Page.