Another Assign

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 the Another Assign action.

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

#	Control	Properties

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
When user click to the Assign to Me button
When user click to the Assign button

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>

Home
HowTos
Syntax
- openDialog
- moveTo
Examples
- Find User Id
- Another Assign
Controls
- MetaData
- Container
  - Tab
  - Header
  - TabHeader
  - Sections
  - Section
  - Footer
  - TabFooter
- Controls
  - Label
  - Button
  - TextBox
  - TextArea
  - Rich TextBox
  - DateTime
  - Number
  - Lookup
  - Regarding
  - Multiselect Lookup
  - Iframe
  - Dropdown
  - OptionSet
  - Entity OptionSet
  - TwoOptions
  - Subgrid
  - Chart
  - Advanced Find
  - Advanced Find Result
  - Advanced Find And Result
  - Upload

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Another Assign

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

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

3. Update your `JavaScript` code

4. Explain code

5. The `result` object return after dialog closed

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

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

Clone this wiki locally

Another Assign

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

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

3. Update your JavaScript code

4. Explain code

5. The result object return after dialog closed

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

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

Clone this wiki locally

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

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

3. Update your `JavaScript` code

5. The `result` object return after dialog closed

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