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]

Not sure how much of a design change is needed but have you tried leveraging the existing snRecordPicker script and creating your own "customRecordPicker" directive?

In this example I had added icons before each sub-field listed and a separator between each record (sys_user table).

I know, it's not the prettiest but it shows that it can be customized by some extent. Anyway you can grab the snRecordPicker script by tagging this at the end of your instance: /scripts/sn/common/controls/directive.snRecordPicker.js

From there you can modify it and then create a directive (angular provider)   in portal and add it to your widget as an angular provider. Once that is complete you can use it in your html markup for that widget.

[tommyjensen]

Can you go into a bit more details as to how to create a new directive and how to use it in a widget?

[tommyjensen]

Also would you be willing to share the changes you made to accomplish the look you show in the screenshot. I would appreciate that a lot 🙂

[tommyjensen]

I tried to do this on jakarta:

- I copied the js from the relevant link on my instance

- created a new angular provider with the name newRecordPicker, no modifications made to the js, I want to see it work like oob before changing anything

- added this provider on the shopping cart widget

- changed the requested for sn-record-picker directive to newRecordPicker in the large shopping cart html

Reloaded the shopping cart. The requested for dropdown list won't show now.