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

[ChrisBurks]

Tommy,

I apologize again but I've still been busy. But, your issues were some of the issues I faced too. Here are the changes I made to the script when I did it.

if (displayFields.length > 1) {
console.log("DF:", displayFields);
var markup = $sanitize(displayFields[0]);
var width = 100 / (displayFields.length - 1);
// changes start here
markup += "<div   class='flex' style='display: flex;border-bottom: 1.5px solid lightgray'>" ;
for (var i = 1; i < displayFields.length; i++){
markup += "<div style='margin-right: 15px; width: 200px; ' class='select2-additional-display-field'>";
if(displayFields[i].column_type == 'user_name'){
markup += '<span class="fa fa-user" style="margin-right: 10px;"></span> ';
}

if(displayFields[i].column_type == 'email'){
markup += '<span class="fa fa-envelope" style="margin-right: 10px;"></span> ';
}
if(displayFields[i].column_type == 'phone'){
markup += '<span class="fa fa-phone" style="margin-right: 10px;"></span> ';
}
markup     += $sanitize(cleanLabel(displayFields[i].value))   + "</div>";
}
markup += "</div>";
return markup;
}

if (scope.displayFields) {
var columns = scope.displayFields.split(",");
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
if (selectedItem[column])
displayFields.push({value: selectedItem[column], column_type: column}); //to track which type of icon to use I pushed in a column_type
}
}

[tommyjensen]

No need to apologize Chris. I appreciate the help 🙂

[yundlu316]

Hi tommyjensen and ChrisB,

I'm also trying to modify the look and feel of snRecordPicker and this thread has been super helpful.   Our team is trying to get this directive to look like other drop downs in Angularjs Material:  

A very minimalist look, with a border bottom and a caret down with the label in the drop down.   When an option has been chosen, the label moves up and becomes smaller:

Is the only way to add css style through inline style=""?   Any suggestions are appreciated.   Thanks!

[ChrisBurks]

Hi David,

Inline styles is not the only way to add css styles. If modifying the snRecordPicker adding a classes to the elements is the best way. That will give it more flexibility.

Personally, I would probably make my own record picker using the Angularjs Material directives than modify the current. It has many parts to it and I think it would be just as much work creating it with just the Material stuff.

[Alex307]

I have a similar requirement for one of my demands. Before I go into detail I'm just pinging to see if any of you are getting notifications for this thread.

Short version: I don't know what I'm doing with directives/providers and there is not enough information for a beginner to follow along what is described here. I'll provide more detail and the code I'm working with if I get a response.