Pimp Your Documents Properties’ Display
This trick provides a way to customize the display of the properties of your document.
Here is how your document could look like:
Your custom display will be included in the Description field of your document.
You will have to:
- Reorganize your Document in the configurable editor
- Customize your Description
- Add a custom script to automate the update
Every time the value of a property is updated, the custom UI is updated automatically. Properties can be hidden: still editable by an administrator.
Reorganize your Document in the configurable editor
Use the feature of the configurable editor to display the Description on the top
1. In your library administration, go to your Document class configuration.
2. In the Document view configuration, apply this recommended setup.
Learn more here: Manage the display of AODocs documents
Tips: You can make all the properties “Hidden” if you want to restrict their edition to the administrators. The properties will only be displayed in the Description.
Customize your Description
You will use the Description section to customize the display of your properties using placeholders.
1. Create a new document of the same class
2. Design your own document display in the Description field.
You can use the html editor (Source Code) to fully customize this interface.
3. Insert in your document’s description the placeholders ${<PropertyName>} when you would like to visualize the custom properties.
In the example below we added ${Price} to display the price of the item.
Tips: You can store the link of the image in a dedicated metadata to be able to update it if necessary.
Add a custom script to automate the update
You will need a script to update dynamically your new display every time a property is edited.
Note: You can ask your “trusted geek” that knows Java to help you out :)
Here are some tips to make it work.
From the Document you just created
1. Go to “Tools -> Source Code”
2. Copy the Source Code content 
This code will need a small modification to work on your custom script.
3. Paste it in a Google Docs
4. Replace all the “ (double quotes) with \" (backslash double quotes) using Find and Replace (CTRL+H)
5. Keep this updated text, you will need it in the next part.
From the custom script section of your library
1. Create a new custom script and name it: Interface (for instance).
2. Select the Type “Update Action”.
3. Click on the name to enter the custom script editor.
4. Select the Security mode “Run with current user’s privileges”.
5. Create a variable and list in Default value all the properties you want to show in your custom display (you included in your description).
6. Complete the Imports section with the following code:
import com.altirnao.aodocs.custom.*; |
Use this script as an example to fill in the last part.
7. After String template =, you need to paste the html code you’ve previously modified (step 5 of previous section).
8. Customize and improve the script to make it fit with your expectations.
Important: If you modify the Description from the configurable editor, don’t forget toupdate your script with the modified html
Comments
Thanks Donato!
Hi, could you share the script? Thanks
Apologies Emanuele! It is shared now.
Hello,
I made this tutorial which works really well! thank you so much !!
I would like to push the visual rendering a little further.
So I used <div> and CSS, everything works perfectly except the position type properties "position: absolute" or "position: relative"
when i create the template in the editor everything works fine, but if i pass its property through the script it will disappear.
does anyone have an idea?
thank you in advance
Hello again,
another question :
in my document i have i"relations" with various custom properties and i am unable to target these fields with your ${filed name} way.
is this workable? is there a specific syntax for this?
thank you in advance
Please sign in to leave a comment.