Wiki source code of Personalization of Forms
Last modified by Pierre Dubois on 2011/08/03 10:20
- Manage
Copy- Actions
Export
Print preview
View Source- Viewers
Siblings
Content
Comments- Annotations
Attachments (5)
History
Information
Hide last authors
 |
1.1 | 1 | = Customizing the forms and screen view = |
| 2 | |||
| 3 | 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). | ||
| 4 | |||
| 5 | [[image:perso1.png]] | ||
| 6 | |||
| 7 | |||
| 8 | This brings a customization layout screen where you can arrange (or rearrange) the layout: | ||
| 9 | |||
| 10 | |||
| 11 | [[image:perso2.png]] | ||
| 12 | |||
| 13 | |||
| 14 | This screen is divided into 3 zones: | ||
| 15 | |||
| 16 | * 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 | ||
| 17 | * the layout zone gives a preview of the screen | ||
| 18 | * the right zone is a context editor for a given property | ||
| 19 | |||
| 20 | == Adding properties to the screen and managing form layout == | ||
| 21 | |||
| 22 | 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). | ||
| 23 | |||
| 24 | |||
| 25 | [[image:perso3.png]] | ||
| 26 | |||
| 27 | You can also change the layout by grouping properties into groups, horizontal groups, tables (with columns) and notebook. | ||
| 28 | |||
| 29 | |||
| 30 | [[image:perso4.png]] | ||
| 31 | |||
| 32 | |||
| 33 | Tips: | ||
| 34 | |||
| 35 | |||
| 36 | 1. Unfold the layout section on the left | ||
| 37 | 1. 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) | ||
| 38 | 1. You can add a page to an existing Notebook | ||
| 39 | 1. You can remove layout elements by dragging them back to the left | ||
| 40 | 1. Sometimes drag and drop can be a little bit sensitive. Try to move your object until the layout is recalculated | ||
| 41 | 1. Alignements may be adjusted by clicking on an item and changing the alignment property on the right | ||
| 42 | 1. Same thing for labels, and read only property | ||
| 43 | |||
| 44 | ((( | ||
| 45 | |||
| 46 | ))) | ||
| 47 | |||
| 48 | == Deploying layouts and layout definitions == | ||
| 49 | |||
| 50 | |||
| 51 | 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. | ||
| 52 | Therefore, when you will deploy your bundle on your target server, the layout will be in the bundle and applied to the screen. | ||
| 53 | |||
| 54 | === Overriding layouts === | ||
| 55 | |||
| 56 | Layouts can override an existing layout, and can reuse an existing layout. | ||
| 57 | |||
| 58 | To override: click on the "new personalization" tool. This will create a new layout that overrides the existing layout (if there is one) | ||
| 59 | |||
| 60 | Reusing an existing layout: | ||
| 61 | 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". | ||
| 62 | |||
| 63 | [[image:perso5.png]] |