Hello,
Wondering if you can help, I am trying to implement the above.
Requirement - when a widget is clicked on the ESC, it counts the clicks. Specifically using the Quick Link widget (or a customised variation of the widget).
Based on the above I have added this to the HTML:
This to the server script:
This to the client controller:
As you can see in the Server Script, I have created a new table and referenced it where required, but do I need to add anything else too it?
Any help appreciated!
Hey Michael,
I was able to get a working example of this.
I created a custom table, as you did here with the same name.
I cloned the Quick Links widget, and made the following changes:
Because there are multiple links in the widget, I opted to leverage event delegation, so in the Widget Link field, I added the following code:
element.on("click", ".link-container a", function (event) {
// Use event delegation so there is only a single DOM event instead of n, where n would be the numebr of quick links
var link;
var itemId;
// This would be the anchor tag, but because events bubble, this could be the span if they clicked the text
link = event.target;
// If the link is not an anchor tag, find the nearest parent element that is an anchor tag
if (link.nodeName !== "A") {
link = $(link).parents("a").get(0);
}
// There is no error handling here, so this may need to be fleshed out a little more
// ID will be a sys_id plus the item-n where n is the index in the array
// Example: "2fd7d372775530104cdac0c23e5a9953-item-0"
// This will replace "2fd7d372775530104cdac0c23e5a9953-item-" with nothing and give us the number
itemId = link.getAttribute("id").replace(/\w+-item-/, "");
controller.recordClick(controller.data.json_data[itemId]);
});
This sets up event delegation to listen for click events on the anchor tags in the link container. I used this method because there are multiple links and because there are multiple different ways that those links display, which you can see by looking at the HTML Template for the `c.data.card_type` checks in the `ng-if`s.
Because events bubble, if someone clicks on the text in the link (the Span node), this will not be the anchor tag, which contains the information we need, so we find the closest parent using `$(link).parents("a")`.
The links have an `id` attribute that is `sys_id-item-index_in_array`. In the second to last line, we get rid of the sys_id, the hypens, and the word `item`, and use that index in the last line to look up the actual link object in the controller data and then pass that into a method I added to the controller.
In the controller, I added the following method:
c.recordClick = function (link) {
this.server.get({
method: "recordClick",
link_sys_id: link.id
});
};
This method will take the link and pass its sys_id to the Server Script.
In the Server Script, I declared a `linkClick` variable at the very top because I like to declare all my variables at the top of the scope, so the definition is not in the following code, but here is the code that records the click into the table:
if (input && input.method === "recordClick") {
linkClick = new GlideRecord("sn_ex_sp_employee_service_center_clicks");
linkClick.initialize();
linkClick.setValue("u_quick_link", input.link_sys_id);
// This console.log should be removed before this goes to production
console.log("Created: " + linkClick.insert());
}
For that table, I did add a single field which is a reference to the quick link table.
Now, when I click the link, I see the following in that table:
I am attaching an update set that has this in it. If you put this in a fresh PDI, you should see everything there.
Let me know if you have any other questions.
m
