Configure Views

The following sections explain configuration of views in AIM.

Configurable Views

You can configure the way data is grouped and displayed on two different Views:

• Summary Views - An entire page dedicated to the information about an object. Usually opened in the content area by selecting on the ID of an object.

• Content Cards - A panel showing information about an object that is displayed over a 2D or 3D document when using Document View.

• Mobile Item Summary View - A view displayed only when the AIM Dashboard is accessed via the mobile site (that is, using a mobile device or tablet).

Summary View - Structure

A summary view comprises summary columns which contain summary panels. Within each summary panel you can display information about the item using a UI Component.

<div class="summary-page">
<div class="halfwidth inline-block">
<div class="summary-panel lightborder curvedcorners">
CONTENT/UI COMPONENT GOES HERE
</div>
<div class="summary-panel lightborder curvedcorners">
CONTENT/UI COMPONENT GOES HERE
</div>
</div>
<div class="halfwidth inline-block">
<div class="summary-panel lightborder curvedcorners">
CONTENT/UI COMPONENT GOES HERE
</div>
<div class="summary-panel lightborder curvedcorners">
CONTENT/UI COMPONENT GOES HERE
</div>
</div>
</div>

Content Card - Structure

A content card view comprises at least one content card section. In each content card section you can place a UI Component to display information about the item.

<div data-aveva-content-card-section="" data-title="{{'Item_Details' | i18n}}" data-icon="App/src/img/icocyg_icb_details.png">
UI COMPONENT GOES HERE
</div>
<div data-aveva-content-card-section="" data-title="{{'Item_Properties' | i18n}}" data-icon="App/src/img/icocyg_icb_attr.png">
UI COMPONENT GOES HERE
</div>
<div data-aveva-content-card-section="" data-title="{{'Item_RelatedItems' | i18n}}" data-icon="App/src/img/icocyg_icb_related.png">
UI COMPONENT GOES HERE
</div>
<div data-aveva-content-card-section="" data-title="{{'Item_RelatedDocuments' | i18n}}" data-icon="App/src/img/icocyg_relateddocs.png">
UI COMPONENT GOES HERE
</div>

Mobile Item Summary View - Structure

The Mobile Item Summary View comprises at least one mobile summary section. In each mobile summary section, you can place a UI Component to display information about the item.

<div data-aveva-mobile-summary-section="" data-title="{{'MobileItemView_2D' | i18n}}" data-icon="App/src/img/Mobile/icocyg_pid.svg">
<div data-aveva-mobile-dg-document-viewer="" data-item="item" data-group="Tag 2D Documents" data-title="{{'MobileItemView_2D' | i18n}}"></div>
</div>

<div data-aveva-mobile-summary-section="" data-title="{{'MobileItemView_Documents' | i18n}}" data-icon="App/src/img/Mobile/icocyg_related_documents.svg">
<div data-aveva-dg-list="" data-item="item" data-group="Related Documents" data-title="{{ 'MobileItemView_Documents' | i18n }}" data-columns="1"></div>

</div>

The highlighted UI Components can be changed to work with any data group that has been configured as part of the AIM site.

For more information about the mobile site, see Use AIM Dashboard for Mobile Site.

There are six UI Components that are provided with the default installation, these can be used in a View to display your data in a variety of ways.

The UI Components are:

• Generic:

  • data-aveva-related-items-tree - shows objects associated with the object in the View, in an expandable tree. Can be limited to one Association Type.

• Documents:

  • data-aveva-revisions - shows other revisions of a document in the View. Can only be used for items of classification DOCUMENT CONTENT or descendants.

  • data-aveva-renditions - shows the renditions of a document in the View. Can only be used on a Content Card for items of classification DOCUMENT CONTENT or descendants.

• Using Data Groups:

  • data-aveva-dg-pane - shows properties/attributes/metadata of the object in the View in a label/value pairing. Can only be used with a DataGroup.

  • data-aveva-dg-list - shows objects associated with the object in the View in a columned list. Can only be used with a DataGroup.

  • data-aveva-dg-viewer - shows a viewer for documents associated with the object in the View. Can only be used with a DataGroup and on Summary Views.

To define your own views:

1. Create your own copy of the relevant HTML file that can be found in [application root]\App\custom\samples. See the Customizing Sample HTML and CSS section.

2. Create your own version of the BootstrapSampleViews.xml and BootstrapSampleDataGroups.xml files that can be found in [installation folder]\Import\Server\Bootstrap. See Altering the Bootstrap Files.

3. Change the BootstrapSampleViews.xml file, using the following syntax/rules:

   1. For each view, create an association between the view (HTML file you created in step 1) and the class it is to be used by:

      1. For the object <ID> type the path of your HTML file from [application root]\App\custom. For example project01/defaultSummary.

      2. For the object <Name> type a descriptive name.

      3. For the object <ClassID> type either SUMMARY VIEW or CONTENT CARD VIEW.

      4. For the object <Association> type "is a view for".

      5. For the association <ClassID> type the name of the class that will use the view.

         Example Summary View for Tags

         <Object>
         <ID>samples/tagSummary</ID>
         <Context>
         <ID>Views</ID>
         <Context>
         <ID>VNET System</ID>
         </Context>
         </Context>
         <Name>Tag Summary View</Name>
         <ClassID>SUMMARY VIEW</ClassID>
         <Association type="is a view for">
         <ClassID>FUNCTIONAL ARTIFACT</ClassID>
         </Association>
         </Object>

         Example Default Content Card

         <Object>
         <ID>samples/defaultContentCard</ID>
         <Context>
         <ID>Views</ID>
         <Context>
         <ID>VNET System</ID>
         </Context>
         </Context>
         <Name>Default Content Card View</Name>
         <ClassID>CONTENT CARD VIEW</ClassID>
         <Association type="is a view for">
         <ClassID>THING</ClassID>
         </Association>
         </Object>

4. Change your BootstrapSampleDataGroups.xml file, for details on using the syntax and examples, see the Data Groups section in the Configure Workhub API Data Structure topic.

5. Change your HTML file, for details on using the syntax and examples, see UI Component Structure section in the topic.

6. Refresh the AIM Dashboard to see the changes.

UI Component Reference

Content Card Section

A content card section is a structural UI component used to define a content card.

Example:

<div data-aveva-content-card-section="" data-title="{{'Item_Details' | i18n}}" data-icon="App/src/img/icocyg_icb_details.png">

CONTENT GOES HERE

</div>

Related Items Tree

A related items tree displays the breakdown of an item using the settings defined for node expansion. It can optionally be start at a first level association type. This component is for use in a content card section or a summary panel.

Example:

<div data-aveva-related-items-tree="" data-item="item" data-association-role="'refers to'" data-node-selection-behaviour="'Select'" data-title="{{'Item_DocumentContents' | i18n}}"></div>

Revisions

A component that displays the revisions for the item. Selecting another revision reloads the tab to display the information of the revision selected. It is not recommended to use this component on the Content Card for a tag.

Example:

<div data-aveva-revisions="" data-item="item" data-title="{{'Item_Revisions' | i18n}}"></div>

Renditions

A component that displays the renditions of the item. Selecting a rendition loads that rendition in the current view if on the Document View. Note, this component only makes sense for items of classification DOCUMENT CONTENT or descendants.

Note: The selection behaviour only works when placed on a Content Card.

Example:

<div data-aveva-renditions="" data-files="item.files" data-current-file="item.currentFile" data-title="{{'Item_Renditions' | i18n}}"></div>

Data Group UI Components

The following are the Data Group UI Components. Also, there is an additional Data Group initialize directive that can be used on Summaries to initialize several Data Groups at once rather than doing them in separate requests. All the components can handle "n" levels of Data Groups and this will be done automatically by the components when they interpret the Data Group.

dgPane

A component that will render a Data Group in a pane of information as label/value pairs.

Example 1:

<div data-aveva-dg-pane="" data-handle="item.handle" data-group="Details" data-title="{{'Item_Details' | i18n}}" data-columns="1" data-show-header="true"></div>

Example 2: Changes for the UI component dgPane (Attribute highlighted in green)

<div class="summary-panel" data-aveva-expandable-panel="" data-aveva-container-size="" data-cs-min-height="100" data-cs-max-height="400">

<div data-aveva-dg-pane="" data-item="item" data-auto-expand="true" data-group="Tag Attributes" data-title="{{ 'Item_Attributes' | i18n}}" data-columns="1">

</div>

</div>

Example 3:

<div data-aveva-dg-pane="" data-order="1" data-handle="item.handle" data-group="Details" datatitle="{{'Item_Details' | i18n}}" data-columns="1" data-show-header="true"></div>

dgList

A component that can be used to display grouped collections of associative data in a number of columns. Primary use case is for displaying collections of associated documents.

Example 1:

<div data-aveva-dg-list="" data-handle="item.handle" data-group="Tag Related Documents" data-title="{{ 'Item_RelatedDocuments' | i18n }}"></div>

Example 2: Changes for the UI component dgList (Attribute highlighted in green)

<div class="summary-panel" data-aveva-expandable-panel="" data-aveva-container-size="" data-cs-min-height="100" data-cs-max-height="400">

<div data-aveva-dg-list="" data-item="item" data-auto-expand="true" data-group="Tag Related Documents" data-title="{{ 'Item_RelatedDocuments' | i18n }}" data-columns="1"></div>

</div>

dgDocumentViewer

A component that uses a specific format of Data Group to display a collection of documents in a viewer on the Summary view.

Note: This can only be used on a Summary, and this control requires a specific format of Data Group.

The required Data Group structure is given below. The final object in the projection must contain a Document ID, InfoLocator, and InfoType (InfoDMSLocator and InfoDMSType are optional) and can work only with a tabulated data group with an ID and metadata.

The following example is a compatible data group, which displays the 2D documents associated to a tag:

<Projection xmlns="http://www.aveva.com/NET/EIA/Search/Projection">
<Object>
<Association type="is referenced in" excludedclasses="3D MODEL" tabulate="true">
<Object>
<ID />
<Association type="is fulfilled by" associationclass="FILE">
<Object>
<Characteristic>
<Name>InfoLocator</Name>
</Characteristic>
<Characteristic>
<Name>InfoType</Name>
</Characteristic>
<Characteristic>
<Name>InfoDMSType</Name>
</Characteristic>
<Characteristic>
<Name>InfoDMSLocator</Name>
</Characteristic>
</Object>
</Association>
</Object>
</Association>
</Object>
</Projection>

Example:

<div data-aveva-dg-document-viewer="" data-item="item" data-group="Tag 2D Documents" data-title="{{'Item_2DView' | i18n}}"></div>

dgViewer

A component that uses a specific format of Data Group to display a collection of files with a viewer on the Summary.

Note: This can only be used on a Summary, and that this control requires a specific format of Data Group.

The required Data Group structure is as follows. The final object in the projection must contain an ID, InfoLocator, InfoType and InfoDMSType. However, the associated object that this structure comes from is configurable.

This example would show all files from 3D MODEL classes of object that this item is referenced in. The highlighted bit is the required.

<?xml version="1.0" encoding="utf-8"?>

<Projection xmlns="http://www.aveva.com/NET/EIA/Search/Projection">

<Object>

<Association type="is referenced in" associationclass="3D MODEL">

<Object>

<Association type="is fulfilled by" associationclass="FILE">

<Object>

<ID />

<Characteristic>

<Name>InfoLocator</Name>

</Characteristic>

<Characteristic>

<Name>InfoType</Name>

</Characteristic>

<Characteristic>

<Name>InfoDMSType</Name>

</Characteristic>

</Object>

</Association>

</Object>

</Association>

</Object>

</Projection>

dgInitialize

This allows multiple Data Groups to be initialized in one request. For example, on a Summary View, where several components displaying Data Group are displayed at once, you can initialize all of them in one go, leading to quicker and more complete page loads. You add this to the highest level tag in the Summary.

The example initializes the Data Groups for Details, Tag Attributes, Tag 2D Files, and so on. It is recommended you keep this in sync with the Data Groups used in the page to improved loading times and reduce staggered page rendering.

data-aveva-dg-initialize="" data-groups="Details, Tag Attributes, Tag 2D Files, Tag Key Attributes, Tag Related Documents, Tag 3D Files" data-handle="item.handle"

Item

The item is a json representation of the item that is displayed on the Content Card or Summary View. The object is the same regardless of whether on the Content Card or Summary View. The item, or one of its properties, are passed into the information including the Data Groups components to display information about that item. This item can also be used to build custom components for the Content Card or Summary View, however, only the properties displayed in the reference section can be used.

When defining a Content Card or Summary View there is a single public object that can be used to pass into the out of the box components or can be used to provide the basis for a custom component. This object represents the item that is being rendered in the view. All properties are lower case as the item is a json object.

Overriding Data Visibility Settings for Data Groups

If required, you can override the "Show only the latest revision" data visibility settings for Data Groups.

Using ShowAllRevisions separated by the ‘|’ sign in the Data Group name will show all the revisions.

Using ShowLatestRevision separated by the ‘|’ sign in the Data Group name will show only the latest revision.

For example, if "Show only the latest revision" is true in the Settings panel, but on the Document Summary View page, you want to see the previous revision for the Document Files Data Group, then you can override the setting by updating the Summary View HTML page as shown below:

Using Item Label Preference Settings for Data Groups

If required, you can set an "Item Label" preference in the Settings panel by using supported tokens.

To use this setting in the Summary View's data-aveva-dg-document-viewer, you must append DocumentView separated by ‘|’. For example, Tag 3D Documents|DocumentView.

See the following screenshot of the Tag Summary view:

Configuring the Panel Component Height

Using the ContainerSize directive, you can configure the height of the Item View and Summary View panel components to either of the following:

• Minimum

• Maximum

• A specific height (fixed)

If the content size inside the panel component is more than the maximum height or fixed height specified for the panel, a scroll bar will appear.

The following table describes the attributes and acceptable values:

The following example shows a sample usage of the ContainerSize directive:

<div class="summary-panel"
data-aveva-container-size="" data-cs-min-height="0" data-cs-max-height="500">
<div>…</div>
</div>

Creating Custom Views of Dashboard in Client Application

The UI components available with the default installation let you to create custom views of AIM in client application.

To create custom views of Dashboard in Client Application:

7. Open the [application root]\App\custom folder, and then create a new HTML file (For example, itemView.html).

8. To view the sample custom views, open the [application root]\App\custom\itemviewsamples folder.

9. Open the two HTML fiIes containing the following sample custom views:

   This Sample File	Contains
   tagView.html	Panels to display Details, Attributes and Related Documents
   documentView.html	File Viewing component

10. Include the required UI components in the new HTML file, referring the sample custom view scripts.

    Note: For information about the UI components, see the UI Component Reference section in this topic .

Customizing Sample HTML and CSS

The sample HTML files are:

• Home Page (Dashboard Tab):

  • defaultHome.html

• Summary Views:

  • defaultsummary.html

  • documentsummary.html

  • tagsummary.html

  • queryformsummary.html

  • setsummary.html

• Content Cards:

  • defaultContentCard.html

  • documentContentCard.html

  • tagContentCard.html

To use your own HTML files you need to:

11. Create a new folder where you will store your modified files in [application root]\App\custom. For example, project01.

12. If you want to use the existing HTML files as a starting point, copy the files from [application root]\App\custom\samples to the new folder.

13. After changing your files, either:

    2. To update the Home Page, see Dashboard Tab.

    3. To update Summary Views or Content Cards, see the Configurable Views section in this topic.

    Note: Any modifications to the AIM Dashboard must continue to display the original copyright statement, as initially displayed in the "out of the box" home page. It must appear in the same place and in the original HTML style on any new home pages hosted in the AIM Dashboard.

The sample CSS file is:

• custom.css

To use your own CSS file, you need to:

14. Create a new folder where you will store your modified file in [application root]\App\themes. For example, project01.

15. If you want to use the existing CSS file as a starting point, copy the file from [application root]\App\themes to the new folder.

16. After changing your file, update the Theme in the Settings Panel, see Changing the Theme.