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
Show last authors
| 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]] |