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

  • 4
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
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!
Photo of Gyan

Gyan

  • 1,400 Points 1k badge 2x thumb

Posted 4 years ago

  • 4
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes, this is the best approach.
Photo of Gyan

Gyan

  • 1,400 Points 1k badge 2x thumb
Thanks Zach! Good to know.
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
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!!