Dear IBM Community,

I am currently working with SRMOBILE and would like to know if it is possible to implement a confirmation dialog when a user hits the Submit button.

The idea is to present the user with a quick overview of the values they entered in the SR form - such as summary, email, phone, location, asset selected, and any attachments - so that they can review all details at once before final submission.

This would eliminate the need for the user to manually navigate through each tab to confirm their entries. Instead, they would simply see all the key information in a single confirmation view and then proceed to submit.

Is there any recommended approach, configuration, or customization to achieve this behavior in SRMOBILE? Any guidance, best practices, or examples would be greatly appreciated.

Thank you in advance for your support.

Best regards,

So i successfully managed to do it by adjusting the submit button <button label="Submit"
        hidden="{ Number(page.state.splitViewIndex) > 0 ? (app.state.screen.size === 'sm') : false }"
        slot="header-buttons"
        loading="{srDS.state.loading}"
        icon="carbon:checkmark"
        disabled="{!srDS.state.canSave}"
        dialog="confirmSRPreview"
        kind="primary"
        id="rem3v"/> and adding the dialog 

 but the dialog UI is a Mess, any enhancement to the looking of the dialog can be suggested as am not yet fully used to the <box> and these tags attributes ^_^" 

Hi Mostafa,

Using <border-layout> should help you. I had a situation where I had to build a custom dialog with a lot of text. I used the following layout and it came out really nice. I didn't have a requirement to add a field but with that also, it will work.

<dialog id="customDialog_1" on-primary-action="customPrimaryAction" on-primary-action-arg="{{'item': wodetails.item, 'datasource': wodetails.datasource, 'worktype':'work','action': 'start'}}" on-secondary-action="customSecondaryAction" on-secondary-action-arg="{{'item': wodetails.item, 'datasource': 'dsstatusDomainList', 'worktype':'work','action': 'start', 'page':page, 'referencePage':'workOrderDetails'}}" primary-action-text="Yes" secondary-action-text="No" title="Custom Dialog">
  <box id="box1" direction="column" padding="1">
	<border-layout id="xyz1_da54e">
	  <top id="xyz1_v65jm">
		<border-layout id="xyz1_aa4g7">
		  <top id="xyz1_x9mxb">
			<label label="Hello," wrap="true" padding="bottom" id="xyz1_z4k4m"/>
		  </top>
		  <start id="xyz1_bjkd6">
			<label padding="none" label="We really care about your safety. More text.............." wrap="true" id="xyz1_xr3kz"/>
		  </start>
		  <bottom id="xyz1_q9rzd">
			<label padding="bottom" label="By proceeding with this work order, you acknowledge that you have undertaken the following assessment:" wrap="true" id="xyz1_xrkdn"/>
		  </bottom>
		</border-layout>
	  </top>
	  <start id="xyz1_xxbwx">
		<border-layout padding="false" id="xyz1_d8xy4">
		  <start id="xyz1_d3gaj">
			<label padding="none" label="\u2022 Stop and Look:" theme="header-x-small" id="xyz1_g_zxv"/>
		  </start>
		  <middle id="xyz1_egarv">
			<label padding="none" label="More text." theme="small" id="xyz1_nxbje"/>
		  </middle>
		</border-layout>
		<border-layout padding="false" id="xyz1_q73eb">
		  <start id="xyz1_kn_pk">
			<label padding="none" label="\u2022 More text:    " theme="header-x-small" id="xyz1_kywrr"/>
		  </start>
		  <middle id="xyz1_axrr3">
			<label padding="none" label="More text." theme="small" id="xyz1_a34a5"/>
		  </middle>
		</border-layout>
		<border-layout padding="false" id="xyz1_makka">
		  <start id="xyz1_pg57m">
			<label padding="none" color="red60" label="\u2022 More text:" id="xyz1_qja4a"/>
		  </start>
		  <middle id="xyz1_e394q">
			<label padding="none" label="More text." theme="small" id="xyz1_jr7n3"/>
		  </middle>
		</border-layout>
	  </start>
	  <bottom id="xyz1_z989z">
		<border-layout id="xyz1_mj7yv">
		  <top id="xyz1_qaz5g">
			<label label="Some text." wrap="true" id="xyz1_rg4p5"/>
		  </top>
		  <start id="xyz1_vej8p">
			<label padding="none" label="Some text." wrap="true" id="xyz1_jmygm"/>
		  </start>
		</border-layout>
	  </bottom>
	</border-layout>
  </box>
</dialog>

Sounds very beneficial I'll give it a try, thanks a lot for the support!

<dialog id="customDialog_1" on-primary-action="customPrimaryAction" on-primary-action-arg="{{'item': wodetails.item, 'datasource': wodetails.datasource, 'worktype':'work','action': 'start'}}" on-secondary-action="customSecondaryAction" on-secondary-action-arg="{{'item': wodetails.item, 'datasource': 'dsstatusDomainList', 'worktype':'work','action': 'start', 'page':page, 'referencePage':'workOrderDetails'}}" primary-action-text="Yes" secondary-action-text="No" title="Custom Dialog">  <box id="box1" direction="column" padding="1">	<border-layout id="xyz1_da54e">	  <top id="xyz1_v65jm">		<border-layout id="xyz1_aa4g7">		  <top id="xyz1_x9mxb">			<label label="Hello," wrap="true" padding="bottom" id="xyz1_z4k4m"/>		  </top>		  <start id="xyz1_bjkd6">			<label padding="none" label="We really care about your safety. More text.............." wrap="true" id="xyz1_xr3kz"/>		  </start>		  <bottom id="xyz1_q9rzd">			<label padding="bottom" label="By proceeding with this work order, you acknowledge that you have undertaken the following assessment:" wrap="true" id="xyz1_xrkdn"/>		  </bottom>		</border-layout>	  </top>	  <start id="xyz1_xxbwx">		<border-layout padding="false" id="xyz1_d8xy4">		  <start id="xyz1_d3gaj">			<label padding="none" label="\u2022 Stop and Look:" theme="header-x-small" id="xyz1_g_zxv"/>		  </start>		  <middle id="xyz1_egarv">			<label padding="none" label="More text." theme="small" id="xyz1_nxbje"/>		  </middle>		</border-layout>		<border-layout padding="false" id="xyz1_q73eb">		  <start id="xyz1_kn_pk">			<label padding="none" label="\u2022 More text:    " theme="header-x-small" id="xyz1_kywrr"/>		  </start>		  <middle id="xyz1_axrr3">			<label padding="none" label="More text." theme="small" id="xyz1_a34a5"/>		  </middle>		</border-layout>		<border-layout padding="false" id="xyz1_makka">		  <start id="xyz1_pg57m">			<label padding="none" color="red60" label="\u2022 More text:" id="xyz1_qja4a"/>		  </start>		  <middle id="xyz1_e394q">			<label padding="none" label="More text." theme="small" id="xyz1_jr7n3"/>		  </middle>		</border-layout>	  </start>	  <bottom id="xyz1_z989z">		<border-layout id="xyz1_mj7yv">		  <top id="xyz1_qaz5g">			<label label="Some text." wrap="true" id="xyz1_rg4p5"/>		  </top>		  <start id="xyz1_vej8p">			<label padding="none" label="Some text." wrap="true" id="xyz1_jmygm"/>		  </start>		</border-layout>	  </bottom>	</border-layout>  </box></dialog>