Add estimate section from Service Provider to Report Work page in Techmobile

About this task

Prerequisites

Procedure

Step 1: Add a new datasource as child from datasource woDetailsReportWork inside report work page.

<maximo-datasource id="woDetailsReportWork" [...]>
    <!-- [...] -->
    <maximo-datasource id="estimateWorkLogDS" id-attribute="worklogid" object-name="worklog" relationship="pluspcustpricest" depends-on="woDetailsReportWork" selection-mode="none"/>
Copy to clipboardCopied!

Step 2: Add a new panel to accommodate the list of estimates/quotes

    <page id="report_work" [...]>
    <!-- [...] -->
    <panel id="estimateWorkLogPanel">
        <box padding-start=".5" id="anjb7"/>
        <border-layout padding="{app.state.screen.size === 'sm' || app.state.screen.size === 'md' ? 'false' : 'true'}" fill-parent="true" id="kwz3r">
            <top background-color="ui-02" id="ery3p">
            <border-layout fill-parent="true" id="m92gw">
                <start shrink="1" direction="column" vertical-align="center" id="zzgrn">
                <box direction="row" vertical-align="center" padding-top=".5" padding-start="{app.state.screen.size === 'sm' || app.state.screen.size === 'md' ? '.5' : '0'}" id="dkn7x">
Copy to clipboardCopied!

Step 3: Create a sliding drawer at dialogs in report_work page.

    <dialogs id="wvvzx">
    <!-- [...] -->
    <!-- Quotation Drawer Start -->
    <sliding-drawer id="estimateWorkLogDrawer" align="start" header-text="New Estimate/Quote" content-padding="false" validate="quotationDrawerValidate" on-close-action="onCloseQuotationDrawer" on-close-action-arg="{{'page':page,'app':app,'ds':reportworkLaborDetailds}}">
        <panel id="v62b_">
        <border-layout fill-parent="true" padding="false" id="dvam5">
            <start width="100" background-color="ui-01" horizontal-overflow="hidden" id="ev_dp">
            <box padding-bottom="0.25" direction="column" fill-parent-horizontal="true" id="b7pyy">
                <border-layout fill-parent="true" padding="true" middle-border="true" id="jzr8n">
Copy to clipboardCopied!

Step 4: Create the method defined at report work page to open the drawer.

Always remember to declared and set contants used in the code. Like TAG in the example below.

    async quotationDrawerOpen(args,event,c) {
        const {datasource, page, action} = args;

        this.app.log.d(TAG,`Open quotation drawer`);
        if (datasource && page && action === 'add') {
            // Create new item
            const newItem = await datasource.addNew();
            newItem.description = " ";
            newItem.plusppriceest = 0;
Copy to clipboardCopied!

Step 5: Create the method to save the form data, in this case a new quotation.

    async quotationDrawerSave(args,event) {
        const {datasource, page} = args;
        this.app.log.d(TAG,`Save quotation drawer`);
        try {
            if (datasource.hasNewItems()) {
                await datasource.save();
            }
            page.findDialog("estimateWorkLogDrawer").closeDialog();
        } catch(er) {
Copy to clipboardCopied!

Step 6: Create the method to handle close dialog button click by reverting the newly created record.

    onCloseQuotationDrawer(args,event) {
        const {app, ds, page} = args;
        this.app.log.d(TAG,`Close quotation drawer`);
        if (ds) {
            ds.undoAll();
        }
    }
Copy to clipboardCopied!

Step 7: It is possible to add a validation method to the drawer. This method will be called when the user tries to save the form.

    quotationDrawerValidate() {
        this.app.log.d(TAG,`Validate quotation drawer form`);
    }
Copy to clipboardCopied!