Custom Filed Renderer to render a reference as picklist on 'edit' mode and remove hyperlink on 'rea

edited July 1, 2019 in Questions
We have a requirement to render a reference field as a picklist on 'edit' mode and remove hyperlink on 'read'/ 'readonly' mode. We used following snippet to achieve this. 



skuid.snippet.registerSnippet('removeHyperlink', function () {
var field = arguments[0],
value = arguments[1],
$ = skuid.$;
    
//If we are in edit mode render the reference field as pick list    
    if(field.mode === 'edit') {
// temporarily set to REFPICK so we get the stock reference picklist functionality
        field.options.type = 'REFPICK';
// render away 
        skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);

    }

// If we're  in read mode, then remove hyperlink 
if (field.mode !== 'edit') {
   skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
        var linkTag = $('a', field.element);
        if(linkTag.length){
            var output = $('<div>');
            output.append(linkTag.html());
        }   
linkTag.replaceWith(output);
}
});




The snippet above worked fine if you edit a record (inline edit) and save it. However, the hyperlink reappeared on the field when record is edited and cancelled without saving. 

To address this problem I posted a question on Skuid Community received a solution (temporary solution) by adding a couple of lines in above code ( Shown in Bold) belowAnd we are using this snippet in many places. I was wondering if it was the right approach/solution.




skuid.snippet.registerSnippet('removeHyperlink', function () { 
var field = arguments[0],
value = arguments[1],
$ = skuid.$;
    
//If we are in edit mode render the reference field as pick list    
    if(field.mode === 'edit') {
// temporarily set to REFPICK so we get the stock reference picklist functionality
        field.options.type = 'REFPICK';
// render away 
        skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
// set it back to custom
        field.options.type = 'CUSTOM';
    }

// If we're  in read mode, then remove hyperlink 
if (field.mode !== 'edit') {
   skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
        var linkTag = $('a', field.element);
        if(linkTag.length){
            var output = $('<div>');
            output.append(linkTag.html());
        }   
linkTag.replaceWith(output);
}
});

Thanks!

Comments

  • Zach McElrathZach McElrath Principal Software Engineer Chattanooga, TN 💎💎💎
    edited March 2, 2017
    Yes, this is the best approach.
  • edited December 23, 2017
    Thanks Zach! Good to know.
  • edited July 1, 2019
    Nice, I was trying to open the link in a new page.

    I was facing the same think , after edit and cancel the link opens in self.

    Thanks!!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!