Skip to main content

I’m trying to render a non-required Field Editor picklist field as radio buttons without the “none” option. I know this essentially makes it required, but in this case we want to allow people to not choose a value without cluttering the UI with “none.” We are okay with them not being able to unselect once they select. I’ve been working on a custom field renderer:


var field = arguments 0],value = arguments 1];<br>if (field.mode == 'edit') {<br>&nbsp; &nbsp; var picklistEntries = new Object();<br>&nbsp; &nbsp; picklistEntries.value = "A";<br>&nbsp; &nbsp; picklistEntries.label = "A";<br>}<br>field.element.append(skuid.ui.renderers.PICKLIST.edit({<br> entries : picklistEntries,<br> renderas : "RADIO_BUTTONS",<br> onChange : function(value) {<br> field.model.updateRow(field.row,field.id,value,{ initiatorId : field._GUID});<br> },<br> mode : field.mode,<br> noneLabel : "ignore"<br> }));

This only shows the “none” option. Alternatively, I’ve been able to push new values to the end of the existing values, but that doesn’t help. My goal was to be able to replace the list, including “none.”

Any ideas?

My next attempt was going to be to actually output the HTML for each radio button and add CSS to the “none” option so that I could hide it. Any code samples for doing something like that?

Thanks,
Seth

Picklistentries is an array of objects, so your if block should look like that:


if (field&#46;mode == 'edit') {<br /> var picklistEntries = [];<br /> picklistEntries&#46;push({<br /> value: 'A',<br /> label: 'A'<br /> },{<br /> value: 'B',<br /> label: 'B'<br /> });<br />}

When this works, you can add the following css:


&#46;nx-fieldtext &#46;nx-radiowrapper:first-child{<br /> display:none;<br />}

This will hide the ‘–None–’ option. If you want to remove the option completely and not just hide it, you can add an inline JS:


(function(skuid){<br /> var $ = skuid&#46;$;<br /> $(document&#46;body)&#46;one('pageload',function(){<br /> $('&#46;nx-fieldtext &#46;nx-radiowrapper:first-child')&#46;remove();<br /> });<br />})(skuid);

Perfect. Thank you, JG!

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings