8 July 2014

Display properties

By Andrew Clifford

Display properties control how data is presented and how the user interacts with it.

Last week we covered how to use Metrici to create and maintain any data structure. Although versatile, the structures we created were unrefined and difficult to use. We can fix this by setting display properties.

There are lots of different display properties, controlling different aspects of the display. Most properties apply to member types, but there are node type properties too.

For member types with values, there are properties to specify whether values are single line, plain text, or text with HTML markup. You can set CSS classes which switch on an editor for text, or a date picker for dates.

Interlinked nodes are used for many purposes in Metrici, and so there are lots of properties to control link targets. By setting a list of possible targets on the member type, you can present targets as a drop-down list, radio buttons or check boxes. You can switch on mobile-friendly large buttons. You can change what caption is shown when no target is selected. You can control whether descriptions are shown next to targets, and whether hyperlinks are shown.

Layout properties modify ordering. You can modify the order in which the value, scale and target are presented, and what they are called. You can sort members, and you can sort targets in a target list.

You can control whether a member type is shown in browse mode, in edit mode, or when there is no data. You can add sequence numbers, for example to number questions on a questionnaire, or switch off headings.

You can set additional text to be shown in edit mode, before the input fields, before the value, scale and target, and at the end. This is useful for giving instructions or asking questions.

You can use properties to add CSS classes to member types, and there are properties to add style statements to further control appearance.

On node types, you can control which buttons to show, for example whether to show the Apply button, and what to call the Save button.

Look in the Metrici Development Guide for a full list of display properties.

To try properties out, have a play with the types you created last week. You will see that the node types and member types have a Display Properties tab, where you can select properties from a drop-down list and enter values. You can get an idea of what's possible by using a node type that we use to test different member type options. In a suitable package, create a new node using type metrici.library.MemberTypeGallery.MemberTypeGalleryType. See how the different member types appear and behave as you edit them.

Adding display properties to member types and node types makes them easier to use, but it adds to the complexity of setting them up. I find it hard to remember what all the display properties do, and I have to constantly remind myself by looking at the documentation.

We can make things much simpler by using the most powerful feature of Metrici, metadata redefinition, which I will cover next week.