How to upload attachments while creating a new record using Page script in UI Builder?

[Subhash Kaushal]

I am trying to create a new Demand record from a UI Builder Page Script.

The script to create a demand record looks like this.

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 * @param {ApiHelpers} params.helpers
 */
 function handler({
    api,
    event,
    helpers,
    imports
}) {
    const inputName = api.state.name;
    const demand_state = api.state.demand_state;
    const user = api.context.session.user.sys_id;
    const area = api.state.area;
    const region = api.state.region;
    const rth = api.state.rth;
    const name = api.state.name;
    const type = api.state.type;
    const service_line = api.state.service_line;
    const sub_service_line = api.state.sub_service_line;
    const portfolio = api.state.portfolio;
    const business_requester = api.state.business_requester;
    const requested_on_behalf = api.state.requested_on_behalf;
    const business_sector = api.state.business_sector;
    const overall_benefit = api.state.overall_benefit;
    const business_problem = api.state.business_problem;
    const funding_source = api.state.funding_source;
    const funding_country = api.state.funding_country;
    const exp_go_live_date = api.state.exp_go_live_date;
    const eng_code = api.state.eng_code;
    const request_details = api.state.request_details;
    const estimated_3_sales_revenue = api.state.estimated_3_sales_revenue;
    const estimated_3_savings = api.state.estimated_3_savings;
    const ppedd_approvers = api.state.ppedd_approvers;
    const managed_service_type = api.state.managed_service_type;

    const newQuery = 'short_description=' + name + '^u_area=' + area + '^u_region=' + region + '^u_rth=' + rth + '^type=' + type + '^u_service_line=' + service_line + '^u_sub_service_line=' + sub_service_line + '^portfolio=' + portfolio + '^submitter=' + business_requester + '^u_requested_on_behalf_of=' + requested_on_behalf + '^u_business_sector=' + business_sector + '^business_case=' + overall_benefit + '^u_what_problem_is_this_product_project_addressing=' + business_problem + '^u_funding_source=' + funding_source + '^u_country=' + funding_country + '^due_date=' + exp_go_live_date + '^u_engagement_code=' + eng_code + '^description=' + request_details + '^resource_allocated_cost=' + estimated_3_sales_revenue + '^resource_planned_cost=' + estimated_3_savings + '^u_ppedd_approvers=' + ppedd_approvers + '^state=' + demand_state + '^u_service_types=' + managed_service_type;


    api.data.create_demand.execute({
        "table": 'dmn_demand',
        "templateFields": newQuery,
        "useSetDisplayValue": false
    });
}

I have added the Attachment component on the UI Builder Page, which looks like this on the page.

The backend view of the Attachment component looks like this

While creating a new demand record, the attachments are not getting uploaded and attached to the newly created demand record.

How do I make sure that the attachments works fine and get attached to the newly created demand record?

[Brad Tilton]

I believe the attachments component needs an actual sys_id to do the attachment after the record is created. Using -1 won't work. Unfortunately, if you have built out your form from scratch with a bunch of components then I think it'll end up being a two-step process.

I would strongly recommend you use the Record page template if you're looking at creating a record rather than building your own form from scratch. You might also just check to see how that page is handling attachments through the sidebar.

[Subhash Kaushal · Accepted solution]

With the help of ServiceNow support, we are able to achieve this functionality.

Approach:

1. Create a GlideForm data resource with -1 as a parameter to create an empty record

2. Get this data resource sys_id as a temporary sys_id

3. Pass this temporary sys_id to the Attachment Component on UI Builder page

4. This will render the Attachment component properly on page without any error.

5. Once the file is attached, it will be attached to the temporary sys_id record in the backend

6. Once the page is submitted, a new Demand record is created. Take its sys_id as a new id

7. Create a data resource to fetch the attachments linked to the old sys_id and update them with new sys_id

8. This will actually move the attachments to the newly created Demand record

The attached xml is the POC provided by ServiceNow support which I re-used and improved for Demand