Customizing the forms and screen view

The screen layout and content of a form (or a view) can be customized by clicking on the wrench on the top right of the screen (you need to have the "UI designer" right as a user to be able to do so).

perso1.png

This brings a customization layout screen where you can arrange (or rearrange) the layout:

perso2.png

This screen is divided into 3 zones:

  • the left zone allows you to select properties or layout elements and drag them (in or out if you want to remove a property) to the layout zone
  • the layout zone gives a preview of the screen
  • the right zone is a context editor for a given property

Adding properties to the screen and managing form layout

You can add properties from the left section with drag and drop (advice: user FireFox or any modern browser to do that - ancient version of IE are slow at best).

perso3.png

You can also change the layout by grouping properties into groups, horizontal groups, tables (with columns) and notebook.

perso4.png

Tips:

  1. Unfold the layout section on the left
  2. to add a column to a table, first drag and drop the table, this will create 2 columns by default. You can reorder the column with the anchors You can add another column (from the "column" tool)
  3. You can add a page to an existing Notebook
  4. You can remove layout elements by dragging them back to the left
  5. Sometimes drag and drop can be a little bit sensitive. Try to move your object until the layout is recalculated
  6. Alignements may be adjusted by clicking on an item and changing the alignment property on the right
  7. Same thing for labels, and read only property

Deploying layouts and layout definitions

When you click on "submit" to save your layout, the layout is stored in its own XML file in your bundle in the definitions/sysFormLayout directory.
Therefore, when you will deploy your bundle on your target server, the layout will be in the bundle and applied to the screen.

Overriding layouts

Layouts can override an existing layout, and can reuse an existing layout.

To override: click on the "new personalization" tool. This will create a new layout that overrides the existing layout (if there is one)

Reusing an existing layout:
To share a common layout for the details, new and edit screens, it may be interesting to create a layout (for example on the "detail" screen, and reuse it in the other screens. You can do that by clicking on the "use a layout customization of another action".

perso5.png

Tags:
Created by Pierre Dubois on 2011/06/16 11:24
     
This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 9.11.5 - Documentation