Show/Hide Toolbars

Navigation: Using PHPRunner > Page Designer

PHPrunner32x32     PHPRunner manual


About Page Designer

Scroll Prev Next More

 Page Designer

 Page Designer It is a grid-based design tool that adds more functionality to the software. You can modify appearance of all pages in your app. Drag-n-drop everything, insert buttons, code snippets, fields, tabs, sections etc. 
pd_about
You can work with different types of objects on the Page designer screen: pages, cells and elements. Each type has different set of options and properties. To see functionality that is available for the current object you need to click on it on the Page designer tab. If you click on the Common pages in the tables list you'll see tabs like menu, login, register and so on. You can click on "+" tab to add page.
 
pd_commonpages_tabs
Below you can see buttons and controls available for that page, "Add menu link", "Add menu group", "Insert", "Undo" and "Redo".
 
If you click on one of you project tables in the tables list you'll see tabs for project pages like list, add, edit and so on.
pd_projectpages_tabs
 
Now you can see buttons and controls available for that page, "Add field", "Remove field", "Insert", "Undo" and "Redo". You can find more info in the article Working with cells.

In the central part of the screen you'll see the preview area. You can click to select cells or elements or even drag and drop elements between cells.
To the right side of the screen you'll see available properties and options. Use "Insert" button to add code-based buttons, snippets and maps to the page. Use "Undo" and "Redo" buttons to undo/redo last change on the page.

 
pd_insert_codebased
 
Default/Draft page checkbox

This property is common for all pages. In the Page Designer you can create multiple pages of the same type i.e. two or three list pages based on the same table. Previously you had to create a custom view or two that were more difficult to manage and also created unnecessary pages. To add a version simply click on + and check the choose the type of the page to be created. Then press ok.
pd_default_draft
 
 

This will be useful in many scenarios. For instance you need to display a button on the list page but don't need to see it when the same list page is shown in dashboard. Or you need to design different list pages with different set of columns for different users. Now you can do this.

One of these pages is selected as the default. If page is marked as a draft it won't appear in generated application. Using drafts you can quickly switch between versions of the page.
 
pd_copy_rename_delete
Copy page button - copies the current page. The auto incremented number will be added to the new new page.
Rename page button - press this button to rename the current page.

Delete page button - press this button to delete the current page.
 
For example let's see the Page Designer interface for the menu page. First click on the Common pages in the tables list. Menu tab will be opened in the top of the page, page preview will be shown in the central part of the application. On the right side you'll see "menu page Properties" and "Options" 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 one of the cells of the current pages, for example on Login page click on the cell containing "Username". The selected cell will he highlighted with light green fill and you'll see Cell properties and options that are available for this cell to the right.
pd_cell_properties

 

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