pragma-views2/webcomponents/pragma-list/developer-notes.md

# Pragma - List

This document describes the required features for the pragma-list component.

## Component
This must be a standard web component that extends HierarchicalBase.
The component must be able to show grouped and leaf items.
Group items take up the full length.
Leaf nodes are rendered using the template defined in the content.

The list is a standard ul and each item in the list a li.
The li content will be a inflated template as defined by the control content.

## Usage

The component is used in the HTML markup.
The following is a example of how it is used.

```html
<pragma-list>
    <template>
        <div>#item.code</div>
        <div>#item.description</div>
    </template>
</pragma-list>
```

When you render the leaf nodes you need to know what that item should look like.
The above example shows that the item uses two divs one to show code and another to use descrioption

The formula for template inflation is that the path of the property value must be defined in full path starting with # as a prefix.
If I have a model and that model has a property called code, that path is "#item.code".

If the model has as sub object called asset and that object has a property called code the path should be: "#item.asset.code"

The lib folder has a template inflator js file that will take in a UI element and a model and inject the model values where they need to be based on the path you defined.


## Features
When a record is selected the selected id must be set to the selected record.
Because you can not assume that the primary key is ID you need to define on the schema what field on the model represents the id.
When making a selection the selected Id is set to that field.