Another Assign - phuocle/Dataverse-Dialog-Builder GitHub Wiki

After the first example, you already familiar with Dataverse Dialog Builder. In this example, we demonstrate how you can move between each tab in dialog.

The dialog we should build like this
dialog

  • This dialog includes a header, subheader, tab header, and tab footer. On the first tab, you’ll find an optionset control that automatically populates the value Me. The Next button is currently invisible. The Assign to Me button is visible. When clicked, it closes the dialog and confirms the action as Assign to Me.

  • If you change the optionset value to User or Team, the Next button becomes visible, and the Assign to Me button disappears. Clicking the Next button will navigate to the second tab where you can select either a User or Team record. On this tab, you can also click the Back button to return to the first tab. Additionally, clicking the Assign button will perform the Assign action and closes the dialog.

  • In any case, you can always click the Cancel button to cancel and closes the dialog.

Let's get started building a dialog using Dataverse Dialog Builder.

1. Create a JavaScript file and upload to your Dataverse environment

"use strict";
var AnotherAssign = (function () {
    "use strict";
    async function OnOpen(executionContext) {
    }
    async function OnLoad(executionContext) {
    }
    async function OnClickCancel(executionContext) {

    }
    return {
        OnOpen,
        OnLoad,
        OnClickCancel
    }
})();

2. Drag and drop controls to Dataverse Dialog Builder as the picture below

00

# Control Properties
1 Metadata 01
2 Event 02
3 Event 03
4 Event 04
5 Event 05
6 Event 06
7 Event 07
8 Event 08
9 Parameter 09
10 Parameter 10
11 Label 11
12 Label 12
13 Tab 13
14 Label 14
15 Section 15
16 OptionSet 16
17 Button 17
18 Button 18
19 Button 19
20 Tab 20
21 Label 21
22 Section 22
23 Lookup 23
24 Button 24
25 Button 25
26 Button 26

3. Update your JavaScript code

"use strict";
var AnotherAssign = (function () {
    "use strict";
    async function OnOpen(executionContext) {
        const options = {
            position: 1,
            width: 600,
            height: 270
        };
        const params = {
            pl_input_count: 2
        };
        const result = await Xrm.Navigation.openDialog("pl_another_assign", options, params);
        debugger;
        if (result?.parameters?.pl_output_button_click) {
            if (result.parameters.pl_output_button_click === 'OnClickAssignToMe') {
                //assgin record to me
            }
            else if (result.parameters.pl_output_button_click === 'OnClickAssign') {
                //assign record to user or team
            }
        }
    }
    async function OnLoad(executionContext) {
        var formContext = executionContext.getFormContext();
        dynamicAddOptionSets();
        loadSubHeader();

        function loadSubHeader() {
            const count = formContext.getAttribute("pl_input_count").getValue();
            const label = formContext.getControl("pl_label_subheader").getLabel();
            formContext.getControl("pl_label_subheader").setLabel(label.replace('{0}', count === 1 ? `1 record` : `${count} records`));
        }
        function dynamicAddOptionSets() {
            const control_pl_pl_optionset_assign_to = formContext.getControl("pl_optionset_assign_to");
            control_pl_pl_optionset_assign_to.addOption({ text: 'Me', value: 50000 });
            control_pl_pl_optionset_assign_to.addOption({ text: 'User or Team', value: 50001 });
            formContext.getAttribute("pl_optionset_assign_to").setValue(50000);
            formContext.getAttribute("pl_optionset_assign_to").addOnChange(pl_optionset_assign_to__addOnChange);
        }
        function pl_optionset_assign_to__addOnChange() {
            const value = formContext.getAttribute("pl_optionset_assign_to").getValue();
            formContext.getControl("pl_button_next").setVisible(value !== 50000);
            formContext.getControl("pl_button_assign_to_me").setVisible(value === 50000);
        }
    }
    async function OnClickCancel(executionContext) {
        const formContext = executionContext.getFormContext();
        formContext.ui.close();
    }
    async function OnClickAssign(executionContext, buttonClick) {
        var formContext = executionContext.getFormContext();
        formContext.getAttribute("pl_output_button_click").setValue(buttonClick);
        formContext.ui.close();
    }
    async function MoveToTab(executionContext, tabName) {
        var formContext = executionContext.getFormContext();
        formContext.ui.moveTo(tabName);
    }
    return {
        OnOpen,
        OnLoad,
        OnClickCancel,
        OnClickAssign,
        MoveToTab
    }
})();

4. Explain code

  • You used Xrm.Navigation.openDialog(...) to open the dialog with logical name pl_another_assign that you already declare in Metadata.
  • You used formContext.ui.moveTo(...) to navigate between tabName that you already declare in Event parameters.
  • All your knowledge of JavaScript remains the same as what you're already familiar with develop Main, Quick Create form.

5. The result object return after dialog closed

  • When user click to the Cancel button, or X button

result

  • When user click to the Assign to Me button

result

  • When user click to the Assign button

result

6. Sure, you need add dialog to your solution and ready to deploy to another environment

solution1

solution2

7. Finally, you can check FormXml {e3a261b4-aa27-ef11-840a-0022485a448f}.xml generated by Dataverse Dialog Builder.

<?xml version="1.0" encoding="utf-8"?>
<Dialog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <LocalizedNames>
    <LocalizedName description="Another Assign dialog" languagecode="1033" />
  </LocalizedNames>
  <Descriptions>
    <Description description="Another Assign dialog" languagecode="1033" />
  </Descriptions>
  <FormId>{e3a261b4-aa27-ef11-840a-0022485a448f}</FormId>
  <UniqueName>pl_another_assign</UniqueName>
  <IsCustomizable>1</IsCustomizable>
  <IntroducedVersion>1.0.0.0</IntroducedVersion>
  <IsTabletEnabled>0</IsTabletEnabled>
  <CanBeDeleted>1</CanBeDeleted>
  <FormXml>
    <forms type="dialog">
      <form>
        <formparameters>
          <querystringparameter name="pl_input_count" type="Integer" />
          <querystringparameter name="pl_output_button_click" type="SafeString" />
        </formparameters>
        <events>
          <event name="onload" application="false" active="false">
            <Handlers>
              <Handler functionName="AnotherAssign.OnLoad" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{8D1C6476-6AFB-4AE9-818E-B21AC15B8E94}" enabled="true" parameters="" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_cancel_1">
            <Handlers>
              <Handler functionName="AnotherAssign.OnClickCancel" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{43501783-9DDA-46B3-82A3-2DC060C4F6AA}" enabled="true" parameters="" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_assign_to_me">
            <Handlers>
              <Handler functionName="AnotherAssign.OnClickAssign" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{2006E35E-37F4-465B-8210-94BFBEAB12C3}" enabled="true" parameters="'OnClickAssignToMe'" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_next">
            <Handlers>
              <Handler functionName="AnotherAssign.MoveToTab" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{F9942D8C-FF1F-4B7E-98F8-35C15F8CF71D}" enabled="true" parameters="'tab_2'" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_cancel_2">
            <Handlers>
              <Handler functionName="AnotherAssign.OnClickCancel" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{D5823314-54E1-462D-8D54-7E89A609514E}" enabled="true" parameters="" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_assign">
            <Handlers>
              <Handler functionName="AnotherAssign.OnClickAssign" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{EA32FBD1-88BA-4BC5-AA35-06F90AB8D38A}" enabled="true" parameters="'OnClickAssign'" passExecutionContext="true" />
            </Handlers>
          </event>
          <event name="onclick" application="false" active="false" attribute="pl_button_back">
            <Handlers>
              <Handler functionName="AnotherAssign.MoveToTab" libraryName="$webresource:pl_/js/AnotherAssign.js" handlerUniqueId="{C0D874A7-DD1F-4B55-A344-F56C06BAEA86}" enabled="true" parameters="'tab_1'" passExecutionContext="true" />
            </Handlers>
          </event>
        </events>
        <header id="{21D5ACD6-6715-4567-B783-B3C4A99DC70C}">
          <rows>
            <row>
              <cell id="{9E95AC65-C121-49A8-9154-659036483FB8}" visible="true" rowspan="1">
                <labels>
                  <label description="ANOTHER ASSIGN" languagecode="1033" />
                </labels>
                <control uniqueid="{0F8CECFC-6D92-49EA-B610-7CE31C8B7D03}" id="pl_label_header" classid="{39354E4A-5015-4D74-8031-EA9EB73A1322}" isunbound="true">
                  <parameters>
                    <IsTitle>true</IsTitle>
                  </parameters>
                </control>
              </cell>
            </row>
            <row>
              <cell id="{6E8A617C-819B-4C60-9F50-7EDCCCD31ABB}" visible="true" rowspan="1">
                <labels>
                  <label description="You have selected {0}. To whom would you like to assign them?" languagecode="1033" />
                </labels>
                <control uniqueid="{030C319C-CC62-4CFD-B919-7E0F1FB45B16}" id="pl_label_subheader" classid="{39354E4A-5015-4D74-8031-EA9EB73A1322}" isunbound="true">
                  <parameters>
                    <IsTitle>false</IsTitle>
                  </parameters>
                </control>
              </cell>
            </row>
          </rows>
        </header>
        <tabs>
          <tab id="{59C82601-E5C4-47F1-893D-A8A644893663}" name="tab_1" visible="true" expanded="true" verticallayout="true" locklevel="0">
            <labels>
              <label description="" languagecode="1033" />
            </labels>
            <tabheader id="{A207CAE0-08C0-4E2C-8687-9A83D2797B1E}">
              <rows>
                <row>
                  <cell id="{12AC1314-D7DC-43AD-8815-DC123934A6A6}" visible="true" rowspan="1">
                    <labels>
                      <label description="What do you want to assign?" languagecode="1033" />
                    </labels>
                    <control uniqueid="{8B37E70B-9742-40B8-A130-26C66B5C06C1}" id="pl_label_tabheader_1" classid="{39354E4A-5015-4D74-8031-EA9EB73A1322}" isunbound="true">
                      <parameters>
                        <IsTitle>false</IsTitle>
                      </parameters>
                    </control>
                  </cell>
                </row>
              </rows>
            </tabheader>
            <columns>
              <column width="100%">
                <sections>
                  <section id="{A930A5AE-069D-403C-9DEE-DD0E748A1C60}" name="tab_1_section_1" labelwidth="115" showlabel="false" visible="true" celllabelalignment="Left" celllabelposition="Left">
                    <labels>
                      <label description="" languagecode="1033" />
                    </labels>
                    <rows>
                      <row>
                        <cell id="{8EBA23FA-21EA-42DC-8439-39C83586CE70}" visible="true">
                          <labels>
                            <label description="Assign to" languagecode="1033" />
                          </labels>
                          <control uniqueid="{AB68C0F2-CDC4-4D05-9795-105AFDF52EF3}" id="pl_optionset_assign_to" classid="{3EF39988-22BB-4F0B-BBBE-64B5A3748AEE}" isrequired="true" disabled="false" isunbound="true">
                            <parameters>
                              <OptionSetId>{00000000-0000-0000-0000-000000000000}</OptionSetId>
                            </parameters>
                          </control>
                        </cell>
                      </row>
                    </rows>
                  </section>
                </sections>
              </column>
            </columns>
            <tabfooter id="{10A821A5-D5B8-4BBA-9DEE-F6B242D34D05}">
              <rows>
                <row>
                  <cell id="{FBF2CAA9-D476-4DC9-8A08-3306310DB279}" visible="false">
                    <labels>
                      <label description="Next" languagecode="1033" />
                    </labels>
                    <control uniqueid="{DB398F07-29F6-4987-B50B-40D8F9A4621C}" id="pl_button_next" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                  <cell id="{1F536635-C1AC-4D79-B355-83C872AFD7A3}" visible="true">
                    <labels>
                      <label description="Assign to Me" languagecode="1033" />
                    </labels>
                    <control uniqueid="{30453176-3DBE-441A-BEE6-00F355CB45D5}" id="pl_button_assign_to_me" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                  <cell id="{B167C0D5-56C5-466E-8643-24BAE35157BA}" visible="true">
                    <labels>
                      <label description="Cancel" languagecode="1033" />
                    </labels>
                    <control uniqueid="{121645D6-17BD-4B73-851A-4512637E6910}" id="pl_button_cancel_1" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                </row>
              </rows>
            </tabfooter>
          </tab>
          <tab id="{32956171-E242-4DD1-B49B-ADA1C2362E9B}" name="tab_2" visible="true" expanded="true" verticallayout="true" locklevel="0">
            <labels>
              <label description="" languagecode="1033" />
            </labels>
            <tabheader id="{747BE98D-B8BB-43C8-A6F0-CF93640A910C}">
              <rows>
                <row>
                  <cell id="{1355B89F-A6B4-4214-9548-ED75592ABF20}" visible="true" rowspan="1">
                    <labels>
                      <label description="Select user or team you want to assign" languagecode="1033" />
                    </labels>
                    <control uniqueid="{863EEE7A-4A50-4A33-AB44-F43B2ADF079A}" id="pl_label_tabheader_2" classid="{39354E4A-5015-4D74-8031-EA9EB73A1322}" isunbound="true">
                      <parameters>
                        <IsTitle>false</IsTitle>
                      </parameters>
                    </control>
                  </cell>
                </row>
              </rows>
            </tabheader>
            <columns>
              <column width="100%">
                <sections>
                  <section id="{66F28C88-230B-4D76-A0AF-14295AFF3923}" name="tab_2_section_1" labelwidth="115" showlabel="false" visible="true" celllabelalignment="Left" celllabelposition="Left">
                    <labels>
                      <label description="" languagecode="1033" />
                    </labels>
                    <rows>
                      <row>
                        <cell id="{F1FA76A3-5B94-4C02-81AF-7CA556B421E4}" visible="true">
                          <labels>
                            <label description="User or Team" languagecode="1033" />
                          </labels>
                          <control uniqueid="{8C4D0116-73E7-4340-9025-7F0C0A4065F7}" id="pl_lookup_user_team" classid="{270BD3DB-D9AF-4782-9025-509E298DEC0A}" isrequired="true" disabled="false" isunbound="true">
                            <parameters>
                              <TargetEntities>
                                <TargetEntity>
                                  <DefaultViewId>{E88CA999-0B16-4AE9-B6A9-9EDC840D42D8}</DefaultViewId>
                                  <EntityLogicalName>systemuser</EntityLogicalName>
                                </TargetEntity>
                                <TargetEntity>
                                  <DefaultViewId>{57E39843-404C-48E5-B1D9-1889098FB65C}</DefaultViewId>
                                  <EntityLogicalName>team</EntityLogicalName>
                                </TargetEntity>
                              </TargetEntities>
                              <DisableViewPicker>false</DisableViewPicker>
                              <DisableQuickFind>true</DisableQuickFind>
                              <DisableMru>true</DisableMru>
                              <AutoResolve>true</AutoResolve>
                              <useMainFormDialogForCreate>false</useMainFormDialogForCreate>
                              <useMainFormDialogForEdit>false</useMainFormDialogForEdit>
                              <AvailableViewIds>{E88CA999-0B16-4AE9-B6A9-9EDC840D42D8}</AvailableViewIds>
                            </parameters>
                          </control>
                        </cell>
                      </row>
                    </rows>
                  </section>
                </sections>
              </column>
            </columns>
            <tabfooter id="{5FBF3127-B23C-4CDB-9DF0-4992B73D6B86}">
              <rows>
                <row>
                  <cell id="{DE17BFF1-43EC-4A1D-831A-F99D2F8F5656}" visible="true">
                    <labels>
                      <label description="Back" languagecode="1033" />
                    </labels>
                    <control uniqueid="{1486883F-3785-42AC-A2F6-A1A071F28CDC}" id="pl_button_back" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                  <cell id="{3C5B7457-DB9C-41D1-91CE-BA4C482A50D7}" visible="true">
                    <labels>
                      <label description="Assign" languagecode="1033" />
                    </labels>
                    <control uniqueid="{9671B42B-F56F-4EC3-8EAF-F32EA271DE2C}" id="pl_button_assign" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                  <cell id="{D83A1C34-DACD-4960-9A5E-2DDF8A14A70B}" visible="true">
                    <labels>
                      <label description="Cancel" languagecode="1033" />
                    </labels>
                    <control uniqueid="{F962AB3F-FE87-4A0A-AF0D-5882BB7EB8CB}" id="pl_button_cancel_2" classid="{00AD73DA-BD4D-49C6-88A8-2F4F4CAD4A20}" disabled="false" isunbound="true" />
                  </cell>
                </row>
              </rows>
            </tabfooter>
          </tab>
        </tabs>
      </form>
    </forms>
  </FormXml>
</Dialog>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️