Display text as clickable link

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

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

}

Elissa,
Can you describe what is happening? Is a link displaying? If so, what happens when you click on it?
Emily

When I use that code, the entire Skuid page simply fails to display.

Are you getting any errors in your Javascript console? (When using Chrome, right-click, then click “Inspect Element”, and go to Console).

Here’s what I’ve got: 

Looks like you never added “var $ = skuid.$;” at the top…

That fixed it!  Thank you!

Good catch, Moshe. That sneaky skuid.$ gets me every time!

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

}

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?

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.