Hi,
Currently the "Edit", "View" and I assume "Delete" links all have the same class of "ang-link" meaning you cannot set different icons per link type, I have asked Knack to refine this by adding another selector to each.
But, to add for example the + icon you see on the "Allow users to add records" Connections you would use the below replacing the "view_37" with your view unless you want it for all links then just use .any :
JS:
$(document).on('knack-view-render.view_37', function(event, view, data) {
$("td.kn-table-link > span > a.ang-link").text("").attr("title", $("th.kn-table-link > span").text()).append('<span class="icon-plus-sign"></span>');
});
CSS:
#view_37 td.kn-table-link span a.ang-link {
text-decoration: none;
}
#view_37 td.kn-table-link span a.ang-link .icon-plus-sign:before{
color: #aaa;
}
#view_37 td.kn-table-link span a.ang-link:hover .icon-plus-sign:before {
color: inherit;
}
Thanks
Dan
Added a feature request to make the Delete have the "Field" option so your way works for all: http://helpdesk.knackhq.com/support/discussions/topics/5000058395
I prefer to use the UI too (In knack at least as that is the point) but don't like extra database fields and we cannot add view fields so hence the JS/CC approach but like your way too but as you say harder to change the icon for the App in one to suit a new branding.
pls note this will work for link to views or edit. unfortunately not for "delete"
Nice.
A way to achieve this for non programming friends who may not be cumfortable with js or css
1/ In your data base object.
- Create a field "image" in the table / image source : upload image file
- Create a conditional rule : "set to a custom value" and upload the icon file you want to use. "When every record" parameter : do not add anything.
2/ In your interface.
- create your link field to the wished view.
- edit the link column and set the link type to "field" and the field to "image" (or whichever the name you gave to your image field).
It requires to be done for all tables but the beauty of knack is also to enable non programming folks to build nice apps too!
If you want to use the old text which you can set in the UI too (That the icon replaces) so you can have different text on the header than on the icon when hovered use:
$(document).on('knack-view-render.view_37', function(event, view, data) {
$("td.kn-table-link > span > a.ang-link").attr("title", $("td.kn-table-link > span > a.ang-link").first().text()).text("").append('<span class="icon-plus-sign"></span>');
});
It also uses the text in the grid/table header for that column as the title (Text shown on hovering over the icon).