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

Questions
,
1

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.

!(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20161214-125395-1lezjn3-2016-12-14 6 inline.png “Image: https://d2r1vs3d9006ap.cloudfront.net/s3\_images/1522981/RackMultipart20161214-125395-1lezjn3-2016-12-14\_\_6\_\_inline.png?1481712993”)

2

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 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 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>
[&#46;&#46;&#46;]
</tr>

We are capturing the click on the so:
1st parent:


2nd parent:

3rd parent:
4th parent:

I hope this helps, probably there’s a better way to do it :stuck_out_tongue:

3

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?