Related Articles
Creating an OData-based table widget
1. On the drawer taskbar, click on Content button
2. From the list of available widget, select OData Table Widget
3. Configure the newly added table by clicking on the Edit Widget Settings Icon on the upper right corner of the widget.
4. On the settings page, supply the title, description, the OData endpoint, and have the option to choose a collection (entity set), filter data through query string, define and arrange the grid columns and define the grid template. Click on the Apply button to refresh the table.
If the endpoint does not specify the entity set, user may select it from the Choose Collection dropdown list.
Query filters may be set at the Query String textbox. This widget is following the OData 4 format. To know more aobut how the system query options are formulated, refer to this MSDN article.
System-defined variables can also be used, i.e. @Lang (represents the current session user's LanguageCode) and @User (represents the current session user's Id).
Sample Query:
?$filter=LanguageCode eq '@Lang' and (ObjectStatusId ne 47101e64-237f-12c8-e3f5-ec5a665412fb and ObjectStatusId ne eec83e3c-0106-d4c0-99ea-93b75fd23020)
You might also want to add dynamic properties in the query string in this format {{property}}.
Example:
In the example above, placeholders are created for the dynamic properties Language and Price. You can use any variable you wish.
If you use these property tokens on the page url:
then the placeholder values on the widget's configuration will be disregarded and the url parameter values will be used in the request query string instead.
To add a column on the grid, under the Choose and Arrange Columns textbox, type in the column name or click on the text and select an item from the provided list of columns.
To remove a column on the grid, under the Choose and Arrange Columns textbox, click on the "x" icon to remove from the list.
To rearrange the columns on the grid, click and drag an item to the desired position.
To define a custom desktop or mobile template, tick on the Custom Desktop Template or Custom Mobile Template and supply the desired template. Desktop template follows the traditional html table format while the Mobile template follows a gridcard(series of span) format.
Sample desktop template:
<tr data-uid="#: uid #"> <td ng-repeat="col in config.allColumns" ng-if="col.hidden == false && col.field == 'Name'" class="grid-highlight-column-title grid-highlight-column" ng-href="{{'/AssetManagement/SoftwareAsset/Edit/' + dataItem['Guid']}}"> <a ng-href="{{'/AssetManagement/SoftwareAsset/Edit/' + dataItem['Guid']}}">{{dataItem[col.field]}}</a> </td> <td ng-repeat="col in config.allColumns" ng-if="col.hidden == false && col.field != 'Name'"> <span ng-if="col.DataType != 'date' && col.DataType != 'number'">{{dataItem[col.field]}}</span> <span ng-if="col.DataType == 'number'">{{dataItem[col.field] || 0}}</span> <span ng-if="col.DataType == 'date'">{{dataItem[col.field] | kendoFormatDate}}</span> </td> </tr> Sample mobile template:
<div class="gridcard gridcard--asset"> <p class="gridcard__title"> <a href='/AssetManagement/SoftwareAsset/Edit/#:Guid#'>#: Name #</a> </p> <div class="gridcard__detailblock"> <p> # if (Version && _.isString(Version)){ # <span>#: localizationHelper.localize("Version") #: #: Version # </span> # } # # if ((Version && _.isString(Version)) && (AvailableCount && _.isString(AvailableCount))){ # · # } # # if (AvailableCount && _.isString(AvailableCount)){ # <span>#: localizationHelper.localize("Available") #: #: AvailableCount #</span> # } # </p> <p> # if (_.isString(Base_LastModified) && Base_LastModified){ # <span>#: localizationHelper.localize("Updated") # #: moment(kendo.toString(new Date(Base_LastModified))).fromNow() #</span> # } # </p> </div> </div>
5. On the drawer taskbar, click on Save to save the changes on the page.
Additional Information
Creating an OData table of Work Items is slightly different than creating a table from an SQL Query. The OData table will contain links to the DynamicData cached information, rather than the regular form which is sourced from Service Manager. Choose your data display wisely, if you require platform cached Work Items, use the OData table, or if you would prefer to use Service Manager data, use an SQL Table instead.
This is important as there may be some fields disabled for users in the regular Work Item forms which aren't disabled in the Dynamic Data form.
This OData Table Widget contains links to the Dynamic Data form, as can be seen by the mouseover URL at the bottom of the browser:
The Work Item form for Dynamic Data looks like this:
This SQL Table Widget contains links to the regular Work Item form, as can be seen by the mouseover URL at the bottom of the browser:
The Work Item form for regular work items looks like this:
