Tile
Definition and Usage
The Tile reusable component is a widget that lets you display name-value pairs, also known as attributes, in a tile format. The purpose of the Tile reusable component is to highlight key pieces of information so users can see them at a glance. The attribute value is shown in the top half of the tile and the attribute name is shown in the bottom half of the tile. If the name or value is too long to fit in the tile, it is truncated, which is indicated by an ellipsis. Tiles are generally arranged in a single row. If there are too many tiles to fit in a single row, the tile size shrinks in order to fit them. If there are still too many tiles to fit in a single row, the tile display wraps onto a second row.
You can configure the Tile reusable component in the following ways:
• Set the maximum number of attributes to display
• Add a custom attribute
• Define the order in which attributes appear
The following is a sample image showing the Tile reusable component:
There are no predefined configurations available for the Tile reusable component.
Binding Properties
There are two properties for Tile component that are available for binding:
• Input— JSON that is the input ID for which data needs to be fetched from the backend system. This information is provided in a CCO (Common Communication Object) format. The following is a sample:
{
"version":"1.0.0",
"data":[
{
"adapter":{
"thingName":"PTC.WCAdapter",
"instanceName":"windchill"
},
"itemListsData":[
{
"objectType":"PTC.ChangeMgmt.ChangeRequest",
"items":[
{
"id":{
"value":"OR:wt.change2.WTChangeRequest2:439476"
}
}
]
}
]
}
]
}
• TailoringName— String that is the instance name of the component. It is tightly coupled to tailoring. TailoringName is used to fetch the saved tailoring information for each component.
Configuration Fields
The following table shows the JSON fields that you can use to configure this component.
Property Name | Description | Type | Default Value | Required or Optional |
attributes | Property names for which the data is expected from backend system. These attributes can either be retrieved from the backend system or can be custom. See subproperties: | MultiValueSelector | N/A | Required |
id | The property-name identifier of the attribute in the backend system, or the custom property-name of the attribute. | String | N/A | Required |
ordinal | Order in which attributes appear in the component. 0 indicates the initial leftmost position. | Integer | N/A | Optional |
objectType | Object type for which the attributes are to be fetched. This type can also be a custom type. | String | N/A | Required |
adapter | Source configuration for the backend system. See subproperties: | JSON | N/A | Required |
| instanceName | Connector instance, meaning which connector is to be used to connect to the backend system. | String | N/A | Required |
thingName | Name of the backend system or adapter from which data is retrieved. | String | N/A | Required |
inTailoring | Whether or not the Tile component is tailorable in the tailoring page. Options: true, false. | Boolean | false | Optional |
maxTileCount | See subproperties: | N/A | N/A | Required |
value | Maximum number of attributes to be shown as tiles. If set to empty string, no constraint on the number of tiles shown. | Integer | N/A | Required; JSON key is required but may be an empty string. |
version | Configuration version. | String | 1.0.0 | Optional |
modelThing | See subproperties: | N/A | N/A | N/A |
entityName | The name of the model Thing that gets the data. | String | PTC.TileAttrib uteModelThing | Required |
version | Configuration version. | String | 1.0.0 | Optional |
Sample Configurations
Sample JSON without custom attributes:
{
"attributes": {
"selectedValues": {
"data": [
{
"itemListsData": [
{
"items": [
{
"id": "RecurringCost",
"ordinal": 0
},
{
"id": "NonRecurringCost",
"ordinal": 1
}
],
"objectType": "PTC.ChangeMgmt.ChangeRequest"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
},
"inTailoring": true
},
"modelThing": {
"entityName": "PTC.TileAttributeModelThing",
"version": "1.0.0"
},
"maxTileCount": {
"value": 5,
"version": "1.0.0"
}
}
Sample JSON using custom attributes:
In the sample below, there are two custom attributes, Attachments and AffectedObjects. Their ObjectType is PTC.ChangeMgmt.ChangeRequest.Custom to differentiate them from the out-of-the-box attributes.
{
"attributes": {
"selectedValues": {
"data": [
{
"itemListsData": [
{
"items": [
{
"id": "RecurringCost",
"ordinal": 0
},
{
"id": "NonRecurringCost",
"ordinal": 1
}
],
"objectType": "PTC.ChangeMgmt.ChangeRequest"
},
{
"items": [
{
"id": "Attachments",
"ordinal": 2
},
{
"id": "AffectedObjects",
"ordinal": 3
}
],
"objectType": "PTC.ChangeMgmt.ChangeRequest.Custom"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
},
"inTailoring": true
},
"modelThing": {
"entityName": "PTC.TileAttributeModelThing",
"version": "1.0.0"
},
"maxTileCount": {
"value": 5,
"version": "1.0.0"
}
}
