Creating a Custom Pop-Up Page in Model-Driven Apps Using JavaScript and Ribbon Workbench

 

Here are the steps to create a custom page for implementing a pop-up screen using a canvas app:

1) Components Used in the Canvas App:

These components were utilized in the canvas app for implementing the pop-up screen.

2) Onstart of App:
    Set(rejectdialogue, false);  // To control the visibility of the "Are you sure?" alert after the Reject button click.

    Set(quitdialogue, false); // To manage the visibility of the "Are you sure?" alert after the Quit button click.

    Set(rejectstatus,false); // To control the visibility of the "Submission Rejected" message.

    Set(rejected,true); // To control the visibility of the Container Menu.

    Set(blanktext,false); // To control the visibility for the alert message "*Justification Comment cannot be blank".

    Set(RecordItem,If(IsBlank(Param("recordId")),Blank(),GUID(Param("recordId")))); // Pass the parameter as the record GUID.

3) Components & Its Properties :

• label2 :
• Text : "Submission Rejected"
• visible : rejectstatus

                 

• Container_quit :
• Visible : quitdialogue

• Button_quit_no:
• Text : No
• OnSelect : 

                                Set(quitdialogue,false);

                                Set(rejected,true);

• Button_quit_yes:
• Text : Yes
• OnSelect : Set(quitdialogue,false);

• Label_quit :
•  Text : "Are you sure, Do you want to cancel ?"

• Container_quit :
• Visible : rejectdialogue

• Button_reject_no:
• Text : No
• OnSelect : 

                                Set(rejectdialogue,false);

                                Reset(TextBox2);

                                Set(rejected,true);

• Button_reject_yes :
• Text : Yes
• OnSelect :

                                Set(rejectdialogue, false);

                                Set(rejected,false);

                                Set(rejectstatus,true);

                                Patch(Submissions,LookUp(Submissions,'Form Submission'=RecordItem),{'Justification Comment':TextBox2.Value});

                                Updatestatusreasonasreject.Run(RecordItem);

• ContainerMain :
• Visible : rejected

• required_field :
• Text : "*Justification Comment cannot be blank"
• Visible : blanktext
• Button1_3 :
• OnSelect :

                                If(

                                    IsBlank(TextBox2.Value),

                                    Set(blanktext,true),

                                    Set(

                                        rejectdialogue,

                                        true

                                    );

                                    Set(

                                        rejected,

                                        false

                                    )

                                )

• Button1_2 :
• OnSelect :
                Set(quitdialogue,true);
                Set(rejected,false); 

4) Create JS file as Web Resource

The JavaScript function 'rejectbutton' is designed to enable the transfer of the current record's ID to the canvas custom page.

function rejectbutton(pageContext) {

    var rec = pageContext.data.entity.getId();

    var record = rec.replace(/[{}]/g, "");

    Xrm.Navigation.navigateTo(

        {

            pageType: "custom",

            name: "prefix_rejectiondialoguebox_5c1c1",//Logical name of Canvas custom page

            entityName: pageContext.data.entity.getEntityName(),

            recordId: record

        },

        {

            target: 2,

            position: 1,

            width: { value: 470, unit: "px" }, // Change width to 470 pixels

            height: { value: 350, unit: "px" }, // Change height to 350 pixels

            title: "Reject Submission"

        }

    ).then(

        function() {

            // Handle success (dialog opened)

        }

    ).catch(

        function(error) {

            // Handle error

        }

    );

}

5)  Custom button in Model Driven App.

Here I added Reject button in Form Ribbon.

Custom Button in Model Driven App:

A 'Reject' button has been added to the form ribbon in the model-driven app.

Below image shows the command for button.