How do I render custom picklist values?

I asked this in a comment above, though have not found a reply and am still stuck with it. How do I modify the snippet to render radio buttons instead of the standard picklist dropdown?

Thank you!

var $ = skuid.$; var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]); skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); var select = field.element.find('select'); if (select.length) { $.each(select.children('option'),function(){ if ($(this).val() === 'Survey Complete - Qualified' || $(this).val() === 'Sent' || $(this).val() === 'Responded' || $(this).val() === 'Survey Complete - DNQ' || $(this).val() === 'Appointment Booked'){ $(this).remove(); } }); }<br>

I’m also trying to figure out how to render a picklist created by a custom field renderer snippet as Radio Buttons. 

I know based on this post: http://help.skuidify.com/m/11720/l/214170-skuid-ui-basic-renderers that I need to use renderas ‘RADIO_BUTTONS’ in some way, but not sure how. 

my snippet:

var field = arguments[0], row = field.row, // set the render condition isPercentage = (row.Indicator__r.Benchmark_Type__c == 'Percentage') ? true : false; value = skuid.utils.decodeHTML(arguments[1]), metadata = field.metadata, element = field.item.element, $ = skuid.$; if (isPercentage &amp;&amp; field.mode =='edit'){ //create a blank variable for picklist entries var picklistEntries = []; // set the picklist entries. note defaultValue doesn't matter, the first one will be default picklistEntries.push( { value: '0', label: 'No', defaultValue: true, active: true }, { value: '1', label: 'Yes', defaultValue: false, active: true } ); field.metadata.picklistEntries = picklistEntries; // render the field as a picklist skuid.ui.fieldRenderers.PICKLIST.edit(field,value); } else{ //use the default renderer skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); }<br>

ask and ye shall receive, h/t to https://community.skuid.com/t/readonly-picklist-radio-buttons-can-still-be-changed-on-…

add a line 

field.options.type = 'RADIO_BUTTONS';

before your skuid.ui.fieldRenderers

So Robin you might try

value = skuid.utils.decodeHTML(arguments[1]); field.options.type = 'RADIO_BUTTONS'; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode]

Thanks Jack! 

Hi Jack and Rob, 

Amazing, thank you for the help! I can now render the options as radio buttons (YAY!). As an added challenge, I would still like to remove unwanted entries. The existing script as suggested earlier does not seem to do the trick any more once the list is rendered as radio buttons. How would I have to modify this code to remove them?

Thank you in advance!


if (select&#46;length) { &nbsp;<br />&nbsp; &nbsp;$&#46;each(select&#46;children('option'),function(){<br />&nbsp; &nbsp; &nbsp; &nbsp; if ($(this)&#46;val() === 'Survey Complete - Qualified' || $(this)&#46;val() === 'Sent' || $(this)&#46;val() === 'Responded' || $(this)&#46;val() === 'Survey Complete - DNQ' || $(this)&#46;val() === 'Appointment Booked'){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this)&#46;remove();<br />&nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp;});

I am trying to render a custom picklist but the picklist is just rendering as normal and there are no errors in the console. Can some one point in the right 

Objective:
If the running user has a sales category of “Retail Sales” then only show the “Retail Sales” option in the picklist. Otherwise render as usual.

Notes:
This is a dependent picklist.

Code:

var $ = skuid.$; var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]); var isRetailSales = []; var userModel = skuid.model.getModel('RunningUser'), quoteModel = skuid.model.getModel('QuoteDetail'), userRow = userModel.getFirstRow(), userSalesCategory = userModel.getFieldValue(userRow,'AC_Sales_Category__c'), isRetailSales = (userSalesCategory == "Retail Sales"); skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); var select = field.element.find('select'); if (isRetailSales &amp;&amp; field.mode == 'edit') { if (select.length) { // Remove unwanted entries $.each(select.children('option'),function(){ if ($(this).val() === 'Retail Sales'){ $(this).remove(); } }); } }<br>

Tami,

It looks like your code is removing the value is the value === ‘Retail Sales’, but from your description, you’re looking to do the opposite. Try changing === to !==

if (isRetailSales &amp;&amp; field&#46;mode == 'edit') {<br /> if (select&#46;length) { &#47;&#47; Remove unwanted entries $&#46;each(select&#46;children('option'),function(){ if ($(this)&#46;val() <b>!==</b> 'Retail Sales'){ $(this)&#46;remove(); } }); } }

Thanks for that catch Matt, but it still is not working. Even when it was “===Retail Sales”, retail sales was not removed. 

^bump^

have you tried triple === in the lines

isRetailSales = (userSalesCategory == "Retail Sales"); 

and/or 

if (isRetailSales &amp;&amp; field.mode == 'edit') {

I’m no JS whiz but I think that first one might need ===

Also you might try inserting some console.log lines at various junctures. Like after isRetailSales definition, console.log('Is Retail Sales? '+isRetailSales), and maybe also after select.length to get the length of your picklist and make sure that is coming in right, and maybe also in the $.each loop, log the value of each picklist value so you can see what it’s capturing. That might help you find an error somewhere. 

Hope that helps!


Jack,

THANK YOU! the issue was with the “==” was why the picklist was not rendering properly. When I changed to “===” the rendering is honored. I will remember this going forward with JS!

However now, the value is not saved. ‘Retail Sales’ is the only option therefore chosen by default (I assume). I checked the object data in the console and the value indeed is not saving.

I tried adding this line with no success. Any idea why the value is not being accepted?

select.append($('<option value="Retail Sales">Retail Sales</option>'));

You said it’s a dependent picklist, is the controlling picklist value set correctly? Is there a record type issue, with Retail Sales not valid for the particular record type you’re using? What error are you getting that it won’t save? I wouldn’t think your custom field renderer snippet would need to handle saving

The controlling value picklist value is set correctly it defaults to the correct value. There is not a record type issue and I am not getting any error on save. 

I made the field required to see what happens on save and it saves with the first value in the picklist not the value that is being displayed.

So for example I am only showing “Retail Sales” based on the snippet. When I hit save “Account Sales - Institutional Sales” is the value being saved which is the first value in the picklist.

I’ve run into similar issues with picklists, particularly for reference fields, where it will default to a value I don’t want and shouldn’t even be available based on filters or security settings. 

Is it possible in your use case to default the value to Retail Sales on the model via a condition or model action? Or, if you make it required, can you add None as an option so people have to choose one? 

Also, I think it might work better to instead of removing all the values that don’t equal Retail Sales, use a render snippet that declares these are all the values of my picklist: ‘Retail Sales’. 

Just had another idea that might be a way around this:
Add two picklists, one that renders if the running user’s Sales Category = ‘Retail Sales’, and one that renders if it doesn’t. On the retails sales picklist, you could override the metadata so that the only option is Retail Sales, and make it required. 

Unless your field is in a table…

Jack,

Thanks for all the great ideas. Your first suggestion wouldn’t work for my use case, I tried your second suggestion without success. I have been working on this all morning trying to go the editing the picklist route, but the value wouldn’t save.

So, I adjusted my thinking.

If the user is a retail sales user I want to set their category automatically and they don’t really need to see the field on create. So I edited the script to do a row update. Attached the script to the save button. Now on every save if the user is a retail sales user then the category is set and I can hide the field from view for those sets of users.

Here is the final code

var params = arguments[0], $ = skuid&#46;$; var isRetailSales = []; var userModel = skuid&#46;model&#46;getModel('RunningUser'), model = skuid&#46;model&#46;getModel('QuoteDetail'), row = model&#46;getFirstRow(), userRow = userModel&#46;getFirstRow(), userSalesCategory = userModel&#46;getFieldValue(userRow,'AC_Sales_Category__c'), isRetailSales = (userSalesCategory === "Retail Sales"); console&#46;log('Is Retail Sales? '+isRetailSales); &#47;&#47; skuid&#46;ui&#46;fieldRenderers[field&#46;metadata&#46;displaytype][field&#46;mode](field,value); &#47;&#47;var select = field&#46;element&#46;find('select'); var category = 'Retail Sales'; if (isRetailSales) { model&#46;updateRow(row, { AC_Category__c: category }); }&nbsp;

Perfect! sounds like an even better solution, since it’s more streamlined for retail sales users. Great work!

Thank you for all your help today!

I ran into a problem when I created a picklist with only one value. For some reason the value was not being save when the model was saved.

I looked in the console and the value in the model under data[0].fieldname was getting set but the value in the model under changes[id].fieldname was not getting set.

I add some lines to my code to set the value in the changes array and that worked. Not sure if this is good practice or if there is a better way but it seems to work.

Note that if I didn’t check the typeof !==undefined I got errors in the console after the record was saved or when trying to cancel model changes or close the popup. Not sure why this code was getting run at that time but that seemed to fix it.

Suggestions of better code are certainly welcome.

var field = arguments[0],<br> value = skuid.utils.decodeHTML(arguments[1]);<br><br>if (typeof field.model.data[0] !== 'undefined') field.model.data[0].Endorser_Type__c ='Municipal';<br> <br>var picklistEntries = field.metadata.picklistEntries;<br> picklistEntries.length = 0; // if you don't do this, then the "real" values are already in the picklist and the code below will add duplicate values<br> picklistEntries.push(<br> { value: 'Municipal', label: 'Municipal', defaultValue: true, active: true }<br> );<br> <br> id =-1;<br> if (typeof field.model.data[0] !== 'undefined'){<br> field.model.data[0].Endorser_Type__c = 'Municipal';<br> id = field.model.data[0].Id;<br> <br> } <br> <br> if ( typeof field.model.changes[id] !== 'undefined' &amp;&amp; id != -1) field.model.changes[id].Endorser_Type__c = 'Municipal';<br> <br> <br>// Run the standard picklist renderer for the given mode<br>skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);




Question along the same lines. I am a noob at code writing so it might have been answered and I haven’t realised. I want to remove picklist values depending on if a checkbox is true or false. i.e if checkbox is true keep picklist entry, if checkbox is false, remove picklist entry. 
Thanks.

FYI for those using a custom renderer on a multipicklist that want checkboxes:

field.options.type = "CHECKBOXES";