Display text as clickable link

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I want to create a field that is text on edit but reads as a URL.  The text would be something like this:

Patient1234BRADLEY 

The URL should prepend some text to become:

O:\PatientFolders\Patient1234BRADLEY

I've got the expanded URL and have figured out how to display text on edit and the longer URL on read, but I just don't know how to turn it into a link. 


var field = arguments[0],   
     value = arguments[1];

if (field.mode === 'read') { 

    var URLValue = 'C:\\PatientFolders\\' + value;
    URLValue = URLValue.replace(/\\/g, '/');

    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,URLValue);

}

else { 

    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Hey, Elissa,
For read mode, instead of using skuid.ui.fieldRenderers, you could add this to your code:

var elem = field.element;
if (field.mode === 'read') {
var URLlink = '<a href="'+ URLValue +'">Text to display</a>';

$(elem).html(URLlink);
}

Does that work?
Emily
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Emily, thank you so much for your help.  This is exactly what I'm trying to do, but the code isn't working - I suspect my Javascript newbie-ness is working against me again.  Here's what I have.  


var field = arguments[0],   
    value = arguments[1],
    elem = field.element;

if (field.mode === 'read') { 
    
    var URLValue = 'O:\\PatientFolders\\' + value;
    URLValue = URLValue.replace(/\\/g, '/');
    
    var URLlink = '<a href="'+ URLValue +'">Patient Folder</a>';

    $(elem).html(URLlink);



else { 

    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

}
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Elissa,
Can you describe what is happening? Is a link displaying? If so, what happens when you click on it?
Emily
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
When I use that code, the entire Skuid page simply fails to display.
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Are you getting any errors in your Javascript console? (When using Chrome, right-click, then click "Inspect Element", and go to Console).
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Here's what I've got: 

Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Looks like you never added "var $ = skuid.$;" at the top...
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
That fixed it!  Thank you!
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Good catch, Moshe. That sneaky skuid.$ gets me every time!
(Edited)
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
And....I'm back.  The issue now is that my field will not go into edit mode.  The field editor default mode is "read with inline edit", but I no longer have the ability to hover on the right-hand side of the field and see the little pencil "edit" icon.  

If I change the bolded part below to "(field.mode ==='edit')", the pencil "edit" icon comes back and I see the link in edit mode and the value in read mode.  Any ideas? 

This is how my code looks now:


var field = arguments[0],       
    value = arguments[1],
    $ = skuid.$,
    elem = field.element;

if (field.mode ==='read')
    
    var URLValue = 'o:\\cases\\' + value;
    URLValue = URLValue.replace(/:\\ /g, ':\c');
    
    var URLlink = '<a href="'+ URLValue +'">Patient Folder</a>';

    $(elem).html(URLlink);
    
}
 
 else { 
     
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Hi all, 

I'm still having an issue getting the "edit" pencil icon to display when my field is in read mode.  I'm wondering if there is something about this expression... 

    $(elem).html(URLlink);

...that prevents the field from rendering as an edit field, with the little arrow icon on the right-hand side that allows me to edit.  Any ideas?
Photo of John Nelson

John Nelson, Product Manager

  • 3,204 Points 3k badge 2x thumb
Hi Elissa, 

Try this instead: 

// run the standard renderer on a blank value
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,'');
// insert the link into the "field" 
// that was created by the renderer
$(elem).find('.nx-fieldtext').append(URLlink);
And you're right. The standard renderer adds the elements that are necessary for the pencil showing up on the right side of the field. Running the renderer takes care of that, then we can plop in whatever we like.
(Edited)