Hi John, which field in your Model did you drag into the Table? This snippet is configured to be used on a Name field. So try dragging in the Name field on your Model and then changing the Field Renderer.
Thanks Zach - I see - you’re relying on the automatic linking you get with the name field to make the field linkable. I just tried it with the name field and it works! Now is there an easy way to apply the same approach to a different field? In our particular application, the name field isn’t the most natural field to have as the link to the detail popup.
John that really depends on how you want to initiate the action — if you want to have a link on a field that does not come with a link, you’ll have to add a link to your field’s DOM element and then give it the on-click behavior given above. What type of Field are you working with? A text field? A lookup/master-detail field?
It’s a name field from a lookup to another object. I just took a quick crack at adding an onclick even directly to the field definition in XML but that didn’t do it. So how does one add the onclick even to a particular field?
Here’s a re-written version of the above Snippet that should let you use it on a non-Name field:
// // CONFIG: identify the Row Action's icon // var ROW_ACTION_ICON = 'ui-silk-building'; var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]), $ = skuid.$; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); // Define the "show popup on click" action var showPopup = function(){ var closestTr = field.element.closest('tr'); var tds = closestTr.children('td'); var actionsCell; if (tds.length) { if (tds.first().find('input[type="checkbox"]').length) { actionsCell = tds[1]; } else { actionsCell = tds[0]; } } if (actionsCell) { var rowAction = $(actionsCell).find('.'+ROW_ACTION_ICON); if (rowAction) { // Trigger the click action rowAction.click(); } } }; // If we're NOT in edit mode, then have the "link" action show a popup if (field.mode !== 'edit') { if (ROW_ACTION_ICON) { var linkTag = field.element.find('a'); if (!linkTag.length) { // Extract field contents and make them the body of a new link tag var contents = field.element.contents().detach(); linkTag = $('<a/>').append(contents); field.element.append(linkTag); } linkTag.attr('href','#').on('click',function(){ showPopup(); }); } }
Zach … should this work for Task.Subject that I mentioned in my comment? I gave it a quick try and in my test so far it just renders the standard link.
How can I do this same thing but for a Field within a Field Editor?
I have a a couple different reference fields on my Account that are used to associate a specific related contact or other object and I don’t have my fields for this within a table.
I really like the built in mini page layout hovers in SF but a click with a pop up would be very nice too.
I was able to use the above piece of code but facing an issue related to layout of popup. i need to display a rich text field (though it is not causing any issue). when i click on button, popup has 7 blank lines above actual text. has anyone else faced such issue?
Code:
var params = arguments[0],
var popupXML = skuid.utils.makeXMLDoc(popupXMLString);
var context = {
row: contextModel
};
console.log(contextModel);
// Launch a Popup asking the user to provide an Escalation reason
var popup = skuid.utils.createPopupFromPopupXML(popupXML,context);
}
You can add custom CSS that targets the row action icon you are interested and sets to be hidden. Getting your selectors just right to target the icon may be a challenge, but just inspect the rendered page and root around until you find the classes and divs.
This is great! Got it working. Is there any way to take it one step further and hide the row actions? Therefore there is just the link to the popup? I assume probably not…
Find the Div for the row actions and add custom css “Display:none” You probably want to have your CSS start with the table ID and navigated down to the specific class for the icons so you don’t hide all row actions on your pages…