Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. For the field you wish to customize, navigate to its properties either through the Field List or a specific form.

  2. The Grid tab of the Field property editor is where you apply the customizations. Select the Grid tab.

  3. On the Grid tab, if the field is a Select list type field and it is desirable to show its options as a dropdown rather than a popup selector, check Dropdown filter list.

  4. Also on the Grid tab, the contents of the cell for this field can be customized leveraging a Custom Template and associated Custom JavaScript that can be invoked from the template. Below is an example that splits the contents of the field on semicolons by placing each portion of the split field value in its own <div>.

  5. After applying the customizations in the Grid tab, click Update on the Property editor, Save the form.

  6. To view the customizations, navigate to the respective Module’s grid view, refresh it to ensure the changes have been applied. You should now see the customizations applied.

...

 

Info

 Simple Example

Column Template (HTML):
<div class="ui-grid-cell-contents" >
{{grid.appScope.executeCustomJs(grid, row, col)}}
</div>

Custom JavaScript:
var cellValue = grid.getCellValue(row, col);
return cellValue ;

Info

Advanced Example (Line break at semicolon)

Column Template (HTML):

<div class="ui-grid-cell-contents" >
<div ng-repeat="role in grid.appScope.executeCustomJs(grid, row, col)">
{{role}}
</div>
</div>

Custom JavaScript:

var cellValue = grid.getCellValue(row, col);
if (cellValue) {
return cellValue.split(';');
}
return undefined;

Note: It may be desirable to use the Dropdown Drop-down filter list option for very short Select Lists where the user will only filter on one value at a time.

...