Question

custom field renderer to make a field required

Forum|Forum|1 year ago
July 10, 2024
4 replies
19 views

+7

jaime2

The use case is this…

I want to have several fields on the page and then unhide them and/or make them required based on some criteria(based on the type I’m in another object defining whether the field is required and/or visible).

I need help trying to set a field as required on a custom renderer. I am able to set it’s mode dynamically but not the required attribute.

var $ = skuid.$, field=arguments[0], value=arguments[1];

console.log('value: ’ + value);
console.log('field: ’ + field.required);
console.log(‘before’);

field.mode = ‘edit’;
field.required = ‘true’;
//also want to unhide this field

skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;

console.log(‘after’);
console.log('value: ’ + value);
console.log('field: ’ + field.required);

This topic has been closed for replies.

B

+10

Bill_McCullough
Forum|Forum|1 year ago
July 10, 2024

Jaime,

I think you can get what you want declaratively in Skuid. Add your field and make it required. Set your render to condition to hide it. When it is shown, it will be required for entry. If it is hidden, it won’t affect saving your record.

Here is a new Contact page that demonstrates this. When Lead Source is set to ‘Other’, the page displays the Contact Description as a required field. While Contact Description is hidden, you can save the new Contact.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Contact">    <models>
        <model id="Contact" limit="1" query="false" createrowifnonefound="true" datasourcetype="salesforce" datasource="salesforce" sobject="Contact">
            <fields>
                <field id="FirstName"/>
                <field id="LastName"/>
                <field id="LeadSource"/>
                <field id="Description"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Contact" uniqueid="sk-3veJd8-92">
            <maintitle>
                <template>New {{Model.label}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.labelPlural}}</template>
            </subtitle>
            <actions>
                <action type="savecancel" afterCancel="/{{Model.KeyPrefix}}/o" afterSave="/{{Id}}" rollbackonanyerror="true"/>
            </actions>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Contact" mode="edit" uniqueid="sk-3veJd8-93">
            <columns>
                <column width="50%">
                    <sections>
                        <section title="Basics">
                            <fields>
                                <field id="FirstName"/> <field id="LastName"/>
                            </fields>
                        </section>
                    </sections>
                </column>
                <column width="50%">
                    <sections>
                        <section title="Additional Info" collapsible="no">
                            <fields>
                                <field id="LeadSource"/>
                                <field id="Description" valuehalign="" type="" required="true">
                                    <renderconditions logictype="and" onhidedatabehavior="keep">
                                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Contact" sourcetype="fieldvalue" field="LeadSource" fieldtargetobjects="Contact" value="Other"/>
                                    </renderconditions>
                                    <enableconditions/>
                                </field>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thanks,

Bill