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
-
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 valueMe
. TheNext
button is currently invisible. TheAssign to Me
button is visible. When clicked, it closes the dialog and confirms the action asAssign to Me
. -
If you change the optionset value to
User or Team
, theNext
button becomes visible, and theAssign to Me
button disappears. Clicking theNext
button will navigate to the second tab where you can select either aUser
orTeam
record. On this tab, you can also click theBack
button to return to the first tab. Additionally, clicking theAssign
button will perform theAssign
action and closes thedialog
. -
In any case, you can always click the
Cancel
button to cancel and closes thedialog
.
Let's get started building a dialog using Dataverse Dialog Builder
.
"use strict";
var AnotherAssign = (function () {
"use strict";
async function OnOpen(executionContext) {
}
async function OnLoad(executionContext) {
}
async function OnClickCancel(executionContext) {
}
return {
OnOpen,
OnLoad,
OnClickCancel
}
})();
# | Control | Properties |
---|---|---|
1 |
Metadata | ![]() |
2 |
Event | ![]() |
3 |
Event | ![]() |
4 |
Event | ![]() |
5 |
Event | ![]() |
6 |
Event | ![]() |
7 |
Event | ![]() |
8 |
Event | ![]() |
9 |
Parameter | ![]() |
10 |
Parameter | ![]() |
11 |
Label | ![]() |
12 |
Label | ![]() |
13 |
Tab | ![]() |
14 |
Label | ![]() |
15 |
Section | ![]() |
16 |
OptionSet | ![]() |
17 |
Button | ![]() |
18 |
Button | ![]() |
19 |
Button | ![]() |
20 |
Tab | ![]() |
21 |
Label | ![]() |
22 |
Section | ![]() |
23 |
Lookup | ![]() |
24 |
Button | ![]() |
25 |
Button | ![]() |
26 |
Button | ![]() |
"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
}
})();
- 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 developMain
,Quick Create
form.
- When user click to the
Cancel
button, orX
button
- When user click to the
Assign to Me
button
- When user click to the
Assign
button
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>