How can we customize the look and feel of the sn-record-picker ?

[Sushma R1]

hi folks,

any idea how can we customize the look and feel of the sn-record-picker ? I'm using it in service portal. I customized the look to minimum extent but if i do page back and forth using   browser buttons I get the default look of the sn-record-picker.

I have a design provided by client and I need to fulfill it.

Any leads would really be appreciated !!

Much thanks in advance !!

Thanks and best regards,

Sushma

[tommyjensen · Accepted solution]

I got it to work.

It was naming standards. If the Angular provider name is newRecordPicker then the directive in the html is new-record-picker.

Also this part of the downloaded js should be removed:

angular.module('sn.common.controls').directive('snRecordPicker',

as well as the ending ) at the end of the code.

[ChrisBurks]

Glad you were able to work it out. I've been real busy but today I was going to post how to add to the portal as a dependency as well as create as a directive. But I think you don't need it now. Cheers!

[tommyjensen]

Thanks Chris, I got basics to work but not looking so good so I would like to ask if you would share the changes you made to give the dropdown the look in the screenshot you posted

[xiaix]

This is awesome... thank you for sharing.

I also figured out how to edit the CSS for the drop-down:

I chose to add a custom directive, 'customDropdownCss'

HTML:

Directive code:

[tommyjensen]

Following Chris suggestion of creating a new Angular Provider I managed to get the dropdown list to look decent.

I found two issues. First was that the div cell that contained each line of data did not fill the drop downlist full width.

Next problem was that the function that gets the data for each line only will return a cell if the field is not null meaning that for some lines you would get 1 or 2 cells even if it should contain 3 fields.

Here is how my list looks now.

And here are the two parts of the code I modified. My additions in red.

                                       if (displayFields.length > 1) {
                                               var markup = $sanitize(displayFields[0]);
                                               var width = 100 / (displayFields.length - 1);
                                              markup += "<div style='width: 100%;display: table;table-layout: fixed;'>";
                                               for (var i = 1; i < displayFields.length; i++)
                                                       markup += "<div style='width: " + width + "%;' class='select2-additional-display-field'>" + $sanitize(cleanLabel(displayFields[i])) + "</div>";
                                               markup += "</div>";
                                               return markup;

                                       var columns = scope.displayFields.split(",");
                                       for (var i = 0; i < columns.length; i++) {
                                               var column = columns[i];
                                               if (selectedItem[column])
                                                       displayFields.push(selectedItem[column]);
else
displayFields.push("&nbsp");
                                       }