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
||Advanced users can make any changes and then go into the HTML
mode and clean up the HTML code.
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.
of a page
Now you can build mobile version of your web application. For
more information see Mobile
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
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
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
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.
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
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
Switch between Edit
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 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 to perform
To cancel all
changes made in free-form mode and return all controls to their
initial positions, click Reset -> Rearrange controls.