Thought this solution would help folks out regarding replacing the Row Action visual component. Row Actions are great for working with table data, but the row of Icons is one of the least favorite visual design elements in the framework. Also, I haven’t seen anything in the API documentation regarding row actions but here’s a solution we came up with that dynamically builds a drop-down picklist of the active options and then executed the declarative actions when the option is selected.
The way this works is the snippet will traverse the DOM, grab the elements from the list of row actions, and build the picklist. This happens on hover and rebuilds each time the hover event occurs, so if there is rendering logic on the rowAction, it will update the picklist real-time. This approach also helps with problems of the field re-rendering with a mode change. When a picklist option is selected it will then parent up to the table row and perform a click on the correlated row-actions. Note that the icons need to be unique in order for this to work properly.
There are few elements to this solution, but it’s quick to setup once in place:
- Add the snippet code and name it RowActionFieldButton.
- Add the CSS below.
- Add a field and use the snippet as the custom renderer. The field used isn’t that important, but it will need to have data in it so it’s best to use the Id. You can either use a custom label or use a space to remove the column header.
- In the table display settings under advanced, add the following class.
This is a generic method and should be able to be plugged in across SKUID tables.
Snippet for the custom field renderer:
var field = arguments[0];
var value = arguments[1];
var cellElem = field.element;
$ = skuid.$;
cellElem.text();
var dropdown = document.createElement(‘div’);
dropdown.setAttribute(“class”, “dropdown”);
button = document.createElement(‘button’);
button.setAttribute(“class”, “dropbtn hoverReady”);
button.append(“Actions”);
area = document.createElement(‘div’);
area.setAttribute(“class”, “dropdown-content”);
dropdown.append(button,area);
cellElem.append(dropdown);
var LoadActions = function(){
if (cellElem[0].childNodes[0].childNodes[1].childElementCount !== undefined){
$(cellElem[0].childNodes[0].childNodes[1]).empty();
}
var act = cellElem.parent().parent().find(".sk-action-field");
skuid.$.each($(act).children(),function(){
titl = this.title;
cls = this.childNodes[0].classList[1];
selecthtml = document.createElement('a');
selecthtml.setAttribute("class","action"+cls+" rowActionSelect");
selecthtml.append(titl);
cellElem[0].childNodes[0].childNodes[1].append(selecthtml);
cellElem[0].childNodes[0].childNodes[0].setAttribute("class","dropbtn hoverDone");
});
};
var RunAction = function(){
target = event.target.classList[0].substring(6);
field.element.parent().parent().find("."+target)[0].click();
};
if (value !== undefined ){
field.element.on(‘mouseover’,“.hoverReady”,LoadActions);
field.element.off(‘click’);
field.element.on(‘click’,“a”,RunAction);
}
CSS for the solution:
.dropbtn {
padding: 0 10px 0 10px;
color: #0070d2;
cursor: pointer;
font-weight: normal;
font-size: .75rem;
line-height: 1.875rem;
text-transform: none;
border-radius: .25rem;
white-space: nowrap;
position: relative;
margin: 5px 4px 7px 0;
box-shadow: none;
vertical-align: middle;
border: 1px solid #d8dde6;
font-style: normal;
background:#fff;
margin-left: -35px;
}
/* The container
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #F2F6F6;
min-width: 150px;
max-width:250px;
z-index: 1;
border-radius:5px;
border: 1px solid #d8dde6;
margin-left: -35px;
margin-top: -9px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #0070d2;
padding: 4px 8px 5px 8px;
text-decoration: none;
white-space: nowrap;
display: block;
border-bottom: 0 solid transparent;
content:none;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
cursor:pointer;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #F2F6F6;
}
.dropbtn>.nx-actionselect-arrow>.ui-icon{
padding: 0 0 0 10px;
}
.nx-actionselect-arrow {
margin-left: 7px;
}
.HideActions .sk-action-field{
display:none;
}