How To: Don't render lookup fields as links

Can we have the display form NOT render lookup fields as links?

I have users that are open a form in Display. Then they want to change the value of a lookup field but instead of clicking the Edit button they click the link in the field.

It has never made since to me that Microsoft will render ALL lookup fields as hyperlinks to the code value. There is NO reason why a user needs to go an edit the code.

As an experiment, I tried adding a Text (Common Field) to the Display form with JS to assign the lookup code LookupValue to the Text field. I used the Text field because I wanted to have a consistent look and behavior of the field and the field's title.

The first problem was the Text field displayed as an editable field. I then added JS to make it disabled but it then renders with a gray background. It isn't possible to assign to the readonly property.

I am open to ideas.

I would like to see the Forms designer add an property to make the Lookup field display as text with no hyperlink.

Hello @smithme,

You can display just the value of the field without hyperlink using Plain text control.

For this, add Plain text control to the form.

image

Enter the internal name of the field in square braces in Plain Text control settings >> General >> Text.
image

1 Like

That works, but how do I get the field label that will match all of the other fields on the form and adapt to a phone correctly?

@smithme,

You can add another Plain text control with the label and style it the way you want to.

@smithme,

You can also remove links using this code:

fd.spRendered(function(){
  $(fd.field('Lookup').$el).find('a').contents().unwrap();
  $(fd.field('LookupMulti').$el).find('a').contents().unwrap();
});
5 Likes

Hiya @mnikitina

Just a follow on to this question, is there a way to make the hyperlink of a lookup open in a dialog rather than in a new tab? And if so, is there also a way we can control the size of the dialog?

Thanking you in advance!

Hello @Jamal_Smith-Graham,

You can use the code below to open lookup item link in a dialog. Learn more about dialog function in our documentation here.

//get item link
var lookupLink = $(fd.field('Lookup').$el).find('a')[0].href;
function openDialog() {
      Dialog.open(lookupLink,
    { args: 'something' }, function(hasSaved) {
    if(hasSaved){
        alert('Form in dialog has saved and closed.');
    }
    else{
        alert('Dialog form was closed without saving!');
    }
}, { width: 600, height: 600  });
}
//remove link
$(fd.field('Lookup').$el).find('a').contents().unwrap();

//add on clikc function to open dialog
$(fd.field('Lookup').$el).click(openDialog)
1 Like

Thanks @mnikitina, I had seen the documentation, but had no idea how to apply it to the lookup field! Very helpful! :slight_smile:

I have made a function from your code to make it easier to apply to multiple lookups for others:

function makeLookupOpenInDialog(lookupInternalFieldName){
//get item link
var lookupLink = $(fd.field(lookupInternalFieldName).$el).find('a')[0].href;
//create function to open link in dialog 
function openDialog() {
	Dialog.open(lookupLink,
	{ args: 'something' },
	function(hasSaved) {
		if(hasSaved){
			//alert('Form in dialog has saved and closed.');
		}else{
			//alert('Dialog form was closed without saving!');
		}
	},
	{ width: 850, height: 600  });
}
//remove link
$(fd.field(lookupInternalFieldName).$el).find('a').contents().unwrap();
//add on click function to open dialog
$(fd.field(lookupInternalFieldName).$el).click(openDialog)}

Would this need to be in the ready for the lookup field, like so?
fd.field('Lookup').ready().then(makeLookupOpenInDialog('Lookup'));

1 Like

Yes, thus you are sure that the field is rendered and the code will be executed.

1 Like

Hello @mnikitina - this looks like a very handy feature, but it does not work for me. Wondering if something has changed since this was published?

Have put this into an Edit and a Display form and both still produce links to the source list.

Thanks in advance!

Hello @Pandra,

Welcome to Plumsail Community!

No, the code should work for the Lookup field on the display form and in the read-only mode.

Have you replaced Lookup with the field internal name? Are you getting any errors in the browser console(F12)?

All set here, somehow I missed a single quote. Works great - thank you for your assistance!

1 Like