Show/Hide Toolbars

Navigation: Using PHPRunner > Visual Editor

PHPrunner32x32     PHPRunner manual

Visual Editor - About

Scroll Prev Next More


Visual Editor built-in in PHPRunner is an editor control that allows the user to edit HTML contents in a more user friendly way. The editor control is very flexible and enables the user to change the appearance of the pages in design or html mode.



Allows seeing what the end result will look like while the pages are being created.

Simply drag and drop objects onto the page and position them freely in the layout.

No html coding is required and you do not need any web experience.

Advanced users can make any changes and then go into the HTML mode and clean up the HTML code.


Main Toolbar

Page elements

"View as" settings

"Edit as" settings

"Filter as" settings

Page revisions

You can track all changes made in Visual Editor, review and restore any revision. To see page revision history, switch to HTML mode  and click Revisions button.

Red areas in HTML code show what was deleted, green areas show what were added. To restore any revision, select that revision in the Revision history and click Restore this revision.


Desktop/Mobile version of a page

Now you can build mobile version of your web application. For more information see Mobile Template.

When Build mobile version option is enabled on Miscellaneous page, Desktop/Mobile radio-buttons appear above the list of tables in Visual Editor. Switching them you see normal (desktop) or mobile version of the currently selected page.


By default, normal and mobile versions of a page are different pages and you can edit them as you like. You have the option to make these pages identical. When in mobile mode, right click on the page in page list and select Use in Desktop mode. Similarly, in the desktop mode, you can select Use in Mobile mode. Then you can select Separate Mobile and Desktop views option in the same way.

Adding custom pages to your application

You can add a new page to your application or import existing one. You can import the whole folder with HTML, images, CSS files and edit/preview them in Visual Editor.



Locking of custom pages

After you modified a page in Visual Editor, you can lock it from further automatic modifications. To lock a page, right click the page name and select Lock page. The lock icon will appear before the name of locked page. Note that you can modify locked pages manually. To unlock the page, right click the page name and select Unlock page.


Also you can enable Lock pages modified in Visual Editor automatically option in Project -> Settings. After that all pages that you manually modify will be locked from further automatic modifications.


Editing field names

Now you can edit field names directly in Visual Editor. But if multiple project languages are selected on Miscellaneous page, you will not be able to do that. In this case double-click the field name and edit it in the opened Label Editor.

Setting landing page

You can set any page as landing page - the page to open when the user enters the site (if login is disabled or login and guest user login are enabled) or just after login. To do that right click the page name and select Set as Landing page.

Free-form mode

In free-form mode you can move fields, labels and other controls on the page within the area where they are located. This mode is available for Add, Edit, View pages, also List and Printer-friendly page with vertical layout (to change page layout, go to Style Editor -> Grid layout). To turn on/turn off free-form mode click Freeform Mode on the main Visual Editor toolbar.


Switch between Edit page/Edit controls option to rearrange fields/field labels and other page controls. Note that inactive area is displayed in grey color.

You can safely turn on and turn off free-form mode. All changes made in free-form mode are saved and you do not lose them when you switch the mode.

Click the Toggle grid button toggle_grid_btn on the right side of main toolbar to display/hide the grid. When you switches to free-form mode for the first time, page elements are not tied to the grid. Therefore click the Align elements to grid button align_to_grid_btn to perform this.

To cancel all changes made in free-form mode and return all controls to their initial positions, click Reset -> Rearrange controls.