Showing Extrafields in Lookup Drop Down

Forms SharePoint Online
1

Hi There

I have a drop down in a form for Contact which is a lookup field. from the look up I am getting extra fields as follows:

WorkAddress
WorkCity
Business_x0020_Country/Id
Business_x0020_Country/Description
WorkPhone

I have added the Expand field

Business_x0020_Country

In the CSS......I have inserted the following

.k-dropdown .k-dropdown-wrap .k-input{
height: auto !important;
}

.lookup-col{
flex-direction: column;
margin-bottom: 5px;
padding-top: 10px;
margin-left: 10px;
}

.lookup-title{
margin-bottom: 3px;
font-size: 16px;
}

.lookup-desc{
margin-bottom: 3px;
font-size: 14px;
}

.lookup-phone{
margin-bottom: 5px;
font-size: 15px;
font-weight: bold;
}

and in the JS I have inserted this:

fd.spRendered(function () {

   var template = '';
    template += '<span class="lookup-col">';
    template += '<p class="lookup-title"> #: data.LookupValue # </p>';
template += '<p class="lookup-desc"> #: data.WorkAddress #';
    template += '#: " - " + data.WorkCity #';
    template += '#: " - " + data.Business_x0020_Country.Description # </p>';
    template += '<p class="lookup-phone"> #: data.WorkPhone # </p>';
    template += '</span>';
    fd.field('Contact').widgetOptions = {
        template: template,
        height: 400,
        virtual: {
            itemHeight: 100
        },
        dataSource: {
            pageSize: 16
        }
    }
});

The problem is here:

template += '#: " - " + data.Business_x0020_Country.Description #

';

Without that line of code it works and shows all the data, but with that line of code nothing works and there are no dropdown objects. What am I doing wrong?

How can I render the Extra field Business_x0020_Country/Description ??

2

Dear @Daniel_Privitelli,
Thank you for posting! I think the issue here is a weird mix up of 'single' and "double" quote marks, as well as some unusual inserts into template.

Take a look at this line:

template += '<p class="lookup-desc"> #: data.WorkAddress #';

Here, the 'single' quote marks indicate String variable for the JS (see how it starts and ends with '), while "double" cross marks are used to indicate an HTML property for the <p> tag. Finally, pay close attention at how the dynamic content is inserted into template - it's all inside the string, with no + signs, isolated from the rest with #: # symbols.

Compare it to your lines:

template += '#: " - " + data.WorkCity #';

The #: # symbols do not isolate the dynamic content, instead, they have some other string inside, and it also uses "double" quotes for some reason...

Maybe you want to use something like this?

template += ' - #: data.WorkCity #';
1 Like
3

Thanks a lot for your help :slight_smile:

Much Appreciated

1 Like