Adding custom meta-properties to the viewer property panel

By Philippe Leefsma

This week sample adds up to my series about customising the default user interface in the viewer. Here are the links if you missed the previous posts:

Building self-contained UI components for the viewer

Screenshot Extension Manager for the viewer

The purpose of that sample is to illustrates how to insert your own properties to the native viewer property panel. I'm calling it meta-property because it shows not only how to add text property with a value and label, but also url links, images and file links.

In that sample, for sake of simplicity, I am hardcoding four properties, one of each type (text, link, file, image), that will be dynamically added to any component property panel. However in a real world scenario, those meta-properties would typically be fetched from your backend, database, or third party web-service, based on the nodeId of the selected component if you need to display component-specific properties.

Here are the properties that I'm adding to the property panel:

 1 var textProp = {
 2   name: 'Text Property',
 3   value: "I'm just a text!" ,
 4   category: 'Meta Properties',
 5   dataType: 'text'
 6 };
 7 
 8 var linkProp = {
 9   name: 'Link Property',
10   value: 'Visit our API portal...',
11   category: 'Meta Properties',
12   dataType: 'link',
13   href: 'http://developer.autodesk.com'
14 };
15 
16 var fileProp = {
17   name: 'File Property',
18   value: 'Click to download ...',
19   category: 'Meta Properties',
20   dataType: 'file',
21   href: 'img/favicon.ico',
22   filename: 'favicon.ico'
23 };
24 
25 var imgProp = {
26   name: 'Image Property',
27   category: 'Meta Properties',
28   dataType: 'img',
29   href: 'img/favicon.ico',
30   filename: 'favicon.ico'
31 };

The result in the viewer panel looks as follow, the link can be clicked and will open in a new browser tab, the image and the file link can be clicked and it will download the resource locally:


The full code sample is contained in a single viewer extension and can be easily re-used in your custom application: