Using multi-column design in version 10

Version 10 makes creating multi-column forms easier. In previous versions you needed to select layout on Style Editor page. In version 10 you can do this right in Page Designer and you can change it at any time without resetting the page. Changes you made to your page will no be lost.

In this article we use Customers table from Northwind database. In Page Designer select Edit page. Here is how it looks by default (all images are clickable):


Now we click Form Layout button and choose two- or three-column layout.

So far so good, we have a three-column form. Now lets add a tab control to this page and drag some fields there.

Select first tab by clicking on its label. Click Form Layout again and choose two-column layout. Select second tab, click Form Layout and choose three-column layout. Rearrange fields by dragging them to different cells if required.

This is pretty much it. Now it's time to build your project and see how this form looks in web browser.

I would also like to show an alternative method of building multicolumn forms. Add a new Edit page. Put cursor into container with form fields so it becomes selected. Click 'Split vertically' button on the right, drag some fields to the new cell.

You can split one of cells to achieve three-column layout or do the same thing with tabs or section. Just make sure you are selecting a cell where database fields reside before splitting it.

Now it can be a good time to change visual appearance of edit form a bit. You can select different cells and change fonts, colors, alignments and more. Just pay attention to what is currently selected in Page Designer. Options on the right will be different depending on selection. Here is just an example of what you can do.

6 comments to Using multi-column design in version 10

  • John G

    Hi , how can i copy the edit page settings in Page Designer to other pages , the add page for example

  • John G

    I’ve noticed that custom views works with all fields of table even if i have unchecked half of them from sql-query designer. Have a look , i think its a bug needs fixation.

    (phprunner v10)

  • John G

    I have target the bug
    When you check/uncheck fields from fields page , designer page doesn’t remove/add the fields-changes and search-rutine on editor page makes errors. Have a look

    (phprunner v10 30548 BETA)

  • Holden

    Do you have an estimate of when 10 will be available? Or at least know if it will be before the next fiscal year? Love ASPRunnerPro!

  • Using the trial version of phprunner v10:

    A fatal application error occurs when accidentally defining a SQL query with a calculated column without assigning it to an alias:

    Example:
    select items,unitcost,items*unitcost from products

    Should instead be:
    select items,unitcost,items*unitcost as totalamount from products.

    In addition, large table schemas take a long time to completely load, causing phprunner to suspend for several minutes prior to resuming.

  • admin

    @Kevin Williams

    I’m checking the latest build (31301) and this kind of query doesn’t produce any errors. It is still recommended though to use aliases for calculated fields.

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>