Display text as clickable link

edited July 11, 2018 in Questions
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:PatientFoldersPatient1234BRADLEY

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); 


Comments

  • Emily DavisEmily Davis ✭✭✭✭
    edited March 2, 2017
    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
  • edited February 15, 2017
    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); 

    }

  • Emily DavisEmily Davis ✭✭✭✭
    edited March 2, 2017
    Elissa,
    Can you describe what is happening? Is a link displaying? If so, what happens when you click on it?
    Emily
  • edited February 15, 2017
    When I use that code, the entire Skuid page simply fails to display.
  • Emily DavisEmily Davis ✭✭✭✭
    edited March 2, 2017
    Are you getting any errors in your Javascript console? (When using Chrome, right-click, then click "Inspect Element", and go to Console).
  • edited February 15, 2017
    Here's what I've got: 

    image
  • edited December 18, 2014
    Looks like you never added "var $ = skuid.$;" at the top...
  • edited February 15, 2017
    That fixed it!  Thank you!
  • Emily DavisEmily Davis ✭✭✭✭
    edited March 2, 2017
    Good catch, Moshe. That sneaky skuid.$ gets me every time!
  • edited February 15, 2017
    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); 




  • edited July 11, 2018
    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?
  • edited September 8, 2015
    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.
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!