How to configure stepper component in ui builder ?

[Serge T1]

Hi,

I try to configure dynamically a stepper component (see attach) wth my record page tabs, in particularly the state field.

I work in UI Builder.

Can you please help me beacuse i didn't any documentation about that.

Thanks in advance

[Lohith Ramanna]

Hi, 
I am trying to to add stepper component with three numbers. In first section there will be content as label and field (blue box) once user filled value clicks next button that moves to second section.

In second section we will have content as label and field (red box) with back button to move first section and next button to move third section. once user filled value and click next button that moves to third section.

In third section we will have content as label and field, with back button to move second section and submit button to create new record in the table.

This is for example. I will attach create new report form, i have to configure that similar using UI builder. Please provide any examples that help me. Thank you in advance

[fran_oisschneid]

Hello Lohith,

The stepper doesn't have buttons, you will have to create "Next" and "Back" UI Actions to perform this.

To display different sections, you will need to create 3 different UI Views, one for each section, to display the fields you want for each sections.

I tell about UI Views and UI Actions having in mind you manage a table record in a standard UI Builder "record" page. You also can build your own buttons and pages in UI Builder.

After you get the expected behavior with your buttons and sections, then you will be able to think about to setup a stepper component and refresh it with the right step when you click a button.

[Lohith Ramanna]

Hi, 
Thank you so much. I created same as you mentioned. its working fine now. 
Next task i am doing, taking data from input, dropdown and select field component and creating new record in the custom table. I am success creating new record based on the value entered, but select field Value are storing in not proper (its kind of sys_id in value). Sys_id is matching selected item record

I am missing something here. 

Client script to create record 

function handler({api, event, helpers, imports}) {  

    const table = api.state.table;

    const breakdown = api.state.breakdown;

    const time_series = api.state.time_series;

    const score = api.state.score;

    const newQuery = 'table=' + table + '^breakdown=' + breakdown + '^score=' + score + '^time_series=' + time_series;  

    api.data.create_record.execute({

        "table": 'x_snc_pltf_insight_store_metric',

        "templateFields": newQuery,

        "useSetDisplayValue": false

    });

}

Data resource instance

client state parameter

i have updated client state parameter by event handler(in input field)

In the submit button i have called event handler above mention client script(create record). 
Can you please suggest me here. where i am going wrong ?

[fran_oisschneid]

Hello,

This fine if you store a sys_id in the new record, and the field is a reference field.

If that doesn't work as you like, is this because you want to store the label of the selected field instead of its sys_id?

[Lohith Ramanna]

Hi françoisschneider,

Yes i want to story label, but in table i can see in this formate " label [00bf1e26a5b00110c0a0e1db2cdc952f] ".  Please check the attachment table_view.png

This is happening only with reference fields. (in the select component values are dynamic).