Please enable JavaScript to view this site.

Navigation: Using ASPRunnerPro > Page Designer

PHPrunner32x32     ASPRunnerPro manual


About Page Designer

Scroll Prev Next More

What is Page Designer?

Page Designer is a grid-based WYSIWYG editor to design pages in your app. You can modify the appearance of every page, insert elements such as buttons, code snippets, fields, tabs, and sections. Page Designer supports drag-n-drop feature, so you can move and rearrange the elements using the mouse.
 

The Page Designer interface is divided into three parts:

page_designer_structure

 

1) Tables list. It shows all active tables and common pages. Select one to show a group of pages available in the app.

 

2) Table pages. It shows the visual editor for the group of pages associated with the selected element in the Tables list. You can select and design different types of pages: List, Add, Edit, View, Print, Search, Export, Import. To add new pages click the '+' button next to the tabs on the top:

additional_pages_add

 

There is a group of buttons and controls available for the selected page under the pages tabs: Add menu link, Add menu group, Insert, Undo and Redo.  You can read more about these elements in the articles Working with common pages, Working with table pages, and Tabs and sections.

 

yellowbulbNote: you can learn more about the Insert element in the articles Insert button, Insert Code snippet, Insert map.

 

The central part of the screen is a preview area. It represents the layout of the page in the app. You can add new elements, click existing ones to select them and view their properties, or drag-n-drop elements between cells.

 

3) Properties. The properties of the selected elements are always shown on the right-side panel. You can edit the properties of pages, cells, and individual elements. Each type has a different set of options available.

Using Page Designer

For example, let's see the Page Designer interface for the menu page. First, click on the Common pages in the Tables list. The menu tab opens, and the page preview appears in the central part of the screen. You'll see menu page properties and Options on the right side, that can be changed for the menu page.

pd_commonpages_menu

 
Click on the login tab to see the preview, properties, and options available for the Login page:

pd_commonpages_login

 
Click on the cell containing "Username". The selected cell becomes highlighted with light green fill, and you'll see Cell properties and options available for this cell on the right-side panel.
pd_cell_properties

 

Now click on the "Username" element to see to the properties and options available for it. The selected element becomes highlighted with red fill.

pd_element_properties

 
See also

Working with common pages

Working with table pages

Working with cells

Working with page elements

Working with additional pages