Populating a reference field dynamically in UI Builder

[NathanHaywood]

Hi all,

I'm attempting what should be a simple thing in theory, but UI Builder seemingly makes simple things difficult. 

Anyway, in the Hardware Asset Workspace, there's a button 'Renew' on ast_contract records. It opens a modal with various fields. One of which is an 'Approver' field. 

What's required:

- Check the 'Cost Centre' of the contract

- If 'Cost Centre' is 'IT' (sys_id of this record), then make the 'Approver' field in the modal read only. I have done this using the below script on the field in UIB.

- If 'Cost Centre' is 'IT', then populate the 'Approver' field with a specific user. - For this I have used a Data Resource look up record and for now gone straight to the sys_user table and found that user, I get access to the data no problem. 

The trouble with the last point is no matter what value I pass into the 'Approver' field from this data resource, it doesn't populate. The field is definitely a reference to sys_user. 

Here is the script that works fine to make the field read-only:

function evaluateProperty({api, helpers}) {

  if(api.data.look_up_record_contract.result.cost_center.value == '6c7bf3a61b51a61003c2db92b24bcb91') {

    return true;

  } else return false;
  
}

Here is the script that doesn't set the value of the field:

function evaluateProperty({api, helpers}) {

  if(api.data.look_up_record_contract.result.cost_center.value == '6c7bf3a61b51a61003c2db92b24bcb91') {

    return api.data.look_up_it_cost_center_approver.result._row_data.uniqueValue;

  } else return '';
  
}

I have also played around with the client scripts such as 'Set values from contract' but this is no use either.

Thanks in advance.

[rahulswami]

Hi @NathanHaywood,

Your read-only script works because readOnly is a property UIB re-evaluates on every render. The field value is not the same thing. On the Form component the value binding is only used when the form first renders, so if your Look Up Record has not resolved at that moment you get a blank field and it never updates afterwards.

1. Check the data path

_row_data.uniqueValue is not a path you should rely on. Log what you actually get:

console.log(JSON.stringify(api.data.look_up_it_cost_center_approver.result));

With Look Up Record you want result.sys_id.value. If you used Look Up Records (plural) it returns an array, so it is results[0].sys_id.value and your current script would return undefined.

2. Set the value with a client action instead of a binding

Add an event handler on the Form component for Form data fetched (or on the data resource’s Data fetch succeeded event) and use the Set Field Values client action:

• Field: approver
• Value: a scripted binding returning the sys_id

If your form component version does not expose that action, use a client script:

function handler({api, helpers}) {
    var ccId = api.data.look_up_record_contract.result.cost_center.value;
    if (ccId !== '6c7bf3a61b51a61003c2db92b24bcb91') return;

    var approver = api.data.look_up_it_cost_center_approver.result;

    helpers.componentEvents.setFieldValues({
        fieldValues: {
            approver: {
                value: approver.sys_id.value,
                displayValue: approver.name.displayValue
            }
        }
    });
}

For reference fields pass both value and displayValue. If you pass only the sys_id string the record saves correctly but the field looks empty on screen, which is usually what people hit here.

One more thing to confirm: make sure the approver Look Up Record actually runs before the modal renders. Open the data resource and check that it is not waiting on an input that is still empty at load time.

If this answer helped you, please mark it as Helpful and Accept as Solution.