Show a table row in popup when click on primary key of the table object.

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I want to open the table record ('test 1') in this editable popup with the record values. Is it possible when i click on Name row of table - test 1 this popup is open and here i can edit its value. please help.

Photo of Rachit Jain

Rachit Jain

  • 252 Points 250 badge 2x thumb
  • excited

Posted 2 years ago

  • 1
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
You can do it via javascript, I've done it to open a drawer when you click on the name.

The trick is via Javascript, capture the on click on the name and simulate a click on the row action that actually opens the popup, you can do it directly with the xml of the content of the popup but with a row action is really easy to maintain the pop up content, the before open actions,...

Steps:

1.- Create a row action to open the popup, Important: the icon must be different from the other row icons. We are going to find that row action via the class of the icon, if more actions in that row have the same icon, you will fire all those actions at the same time.

2.- create a custom render to add a class to the field element, we will catch the click event on that class:
var $ = skuid.$;var field = arguments[0];
var value = arguments[1];
field.element.addClass('linkopendrawer');
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
3.- create an "In-Line" snippet (it will execute without any action):
(function(skuid){	
    var $ = skuid.$;
$(function(){
$(document.body).on('click', '.linkopendrawer a' ,function(){ event.preventDefault();
    $(this).parent().parent().parent().parent().find(".ui-silk-application-view-columns").click();
    });
}); })(skuid);

(Warning: I copy-pasted from a big function, syntax can be wrong)
What this code does is:

Captures the Click event on the <a> child elements of the .linkopendrawer Class:
$(document.body).on('click', '.linkopendrawer a' ,function(){ 
It stops the execution of the click event:
event.preventDefault();
goes to the <TR> and finds the button of the action:
$(this).parent().parent().parent().parent().find(".ui-silk-application-view-columns")
Note: in this code I'm using the "ui-silk-application-view-columns" icon, change that for the class of the icon you are using

and then fires the click on it:
$(this).parent().parent().parent().parent().find(".ui-silk-application-view-columns").click();
That's why it's important the uniqueness of the icon, you will fire all the actions that have that icon.

Why 4 parents?

The final DOM structure of the field is something like:
<tr>
<td>
<div class="nx-field linkopendrawer">
<div class="nx-fieldtext">
<a href="/ID">NAME</a>
</div>
</div>
</td>
[...]
</tr>

We are capturing the click on the <a> so:
1st parent: <div class="nx-fieldtext">
2nd parent: <div class="nx-field linkopendrawer">
3rd parent: <td>
4th parent: <tr>


I hope this helps, probably there's a better way to do it :p
(Edited)
Photo of Rachit Jain

Rachit Jain

  • 252 Points 250 badge 2x thumb
Thanks pablo for your detail answer. Can you please explain the second step. CAn you please explain how to custom render to add a class to the field element?