[OutSystems Data Grid] Outsytems DataGrid: Show multiple Icons in action column

Back to Forums

Adam Holland

Solved

[OutSystems Data Grid] Outsytems DataGrid: Show multiple Icons in action column

Question

DataGrid

Forge

I have a requirement to have a column display 3 icons. The Icons need to be visible at all times. I cannot add a separate menu per https://www.outsystems.com/forums/discussion/72489/add-multiple-action-in-action-column/

The first Icon is an If block based off of 4 parameters within the dataset

Service date, Rounding type, Current Week rounding count and 5 week Rounding Count

There are several if blocks to display different colored Circles (Red, Yellow, Green) as well as a history icon if its older than the current week and The History Icon is also only displayed for "General Rounding" Types

The Second Icon is a link to Edit the device

The Third Icon is to a link to Perform maintenance.

I have this built out in the default table view but users need to be able to modify the visible columns, Size and Order.

So I have now built the table using this Data Grid Component but I cant figure out how to implement the the Icons in an Action. (Or Whatever column it needs to be in)

Here is what it looks like currently in Production using the default table

Here is the Widget View

Here is the Current Data Grid in Development. The First Column I want to have the three icons(Currently the Edit and Perform Maintenance Icons are in a separate column)

Is this at all possible with the Data Grid Component?

03 May 2022

Adam Holland

Solution

So I found a solution,

I Added an action column with a status number to determine which colored icon to display.

Then, I added a mutation observer to look at that status and add the appropriate icons.

The data grid only displays the rows visible on the screen and modifies the rows when the grid is scrolling.

OnReady JavaScript

//AddIcons

var elCellGrid = document.querySelector("div.wj-cells");

obGridChange = new MutationObserver(function(mutationsList, obGridChange) {

AddIcons();

});

obGridChange.observe(elCellGrid, {characterData: false, childList: true, attributes: true});

Included Script

function AddIcons()

{

var arrHeaders = document.querySelector("div.wj-colheaders").querySelectorAll("div.wj-cell");

var arrRows = document.querySelector("div.wj-cells").querySelectorAll("div.wj-row");

var arrCells =[];

var nStatusCol = -1;

var sStatus = "";

var elStatusCell = null;

for(var i = 0; i < arrHeaders.length; i++) {

if(arrHeaders[i].innerText == "Status") nStatusCol = i;

}

for(var j = 0; j < arrRows.length; j++) {

elStatusCell = arrRows[j].querySelectorAll("div.wj-cell")[nStatusCol];

sStatus = elStatusCell.innerText;

switch(sStatus) {

case "0":

elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-exclamation-circle fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";

break;

case "1":

elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-red' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";

break;

case "2":

elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";

break;

case "3":

elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";

break;

case "4":

elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";

break;

case "5":

elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";

break;

case "6":

break;

}

See solution in context

17 May 2022

Asher

Enclose your icons in a container in the first column. The container will register as one item in the table and a container can hold multiple items.

04 May 2022

1 reply

04 May 2022

Show thread

Hide thread

Adam Holland

The issue is that I cant drag anything into the Data Grid tiles. I can place a container in between the tiles but they do not show in the application once published. Below I have the Container and icons placed before the first tile.

04 May 2022

Adam Holland

Solution

So I found a solution,

I Added an action column with a status number to determine which colored icon to display.

Then, I added a mutation observer to look at that status and add the appropriate icons.

The data grid only displays the rows visible on the screen and modifies the rows when the grid is scrolling.

OnReady JavaScript

//AddIcons

var elCellGrid = document.querySelector("div.wj-cells");

obGridChange = new MutationObserver(function(mutationsList, obGridChange) {

AddIcons();

});

obGridChange.observe(elCellGrid, {characterData: false, childList: true, attributes: true});

Included Script

function AddIcons()

{

var arrHeaders = document.querySelector("div.wj-colheaders").querySelectorAll("div.wj-cell");

var arrRows = document.querySelector("div.wj-cells").querySelectorAll("div.wj-row");

var arrCells =[];

var nStatusCol = -1;

var sStatus = "";

var elStatusCell = null;

for(var i = 0; i < arrHeaders.length; i++) {

if(arrHeaders[i].innerText == "Status") nStatusCol = i;

}

for(var j = 0; j < arrRows.length; j++) {

elStatusCell = arrRows[j].querySelectorAll("div.wj-cell")[nStatusCol];

sStatus = elStatusCell.innerText;

switch(sStatus) {

case "0":

break;

case "1":

break;

case "2":

elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";

break;

case "3":

elStatusCell.innerHTML = "<div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green' style='margin-left: 0px; margin-right: 0px;'></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div>";

break;

case "4":

elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-yellow OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";

break;

case "5":

elStatusCell.innerHTML = "<div data-block='Adaptive.ColumnsSmallLeft' class='OSBlockWidget' id='$b4'><div data-container='' class='columns columns-small-left gutter-none tablet-break-none phone-break-none '><div class='columns-item' id='b4-Column1'><div data-container='' class='circle-base circle-green OSInline' title='Within Current Period: Red = 0 events, Yellow = 1 event, Green > 1 event' style='width: 20px; margin-left: 0px; height: 20px; margin-right: 10px;'><i data-icon='' class='icon fa fa-history fa-1x' title='Device has never been Rounded' style='font-size: 20px;'></i></div></div><div class='columns-item' id='b4-Column2'><div data-container=''><i data-icon='' class='icon fa fa-pencil-square-o fa-2x' title='Edit' id='IconEdit2' style='color: rgb(0, 121, 161); font-size: 20px; margin-right: 10px; margin-top: 2px;'></i><i data-icon='' class='icon fa fa-wrench fa-2x' title='Perform Maintenance' id='IconWrench2' style='margin-left: 0px; color: rgb(0, 121, 161); font-size: 20px;'></i></div></div></div></div>";

break;

case "6":

break;

}

17 May 2022

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines