Dialog Builder Releases

v3.4.0 - 1 November 2024

  • Updated styles for D365 "New Look".
  • Default dialog padding is now 24px instead of 20px to match OOTB popups.
  • The color dialog option is deprecated, and is no longer used to color the title or buttons. This is to align with OOTB popups, and may be reintroduced in future.
  • Title, message, icon, and close/expand button alignment changes:
    • Icons are now displayed at 24px instead of 40px, and display inline with the title.
    • The message dialog option now sits below both the title and icon, rather than beside the icon.
    • The close and resize buttons are now inline with the title and icon, and will no longer overlap content.
    • Dialog title/message/icon are no longer centered vertically when no content is included. The heading is now always aligned to the top with the close and expand buttons.
  • Sizes of most elements/fields have been adjusted to be more in line with OOTB styles, and may cause scrollbars to appear on some existing dialogs when upgrading.
  • The showLoading function now defaults to 300px width and 160px height to better fit the content.
  • Added a divider option to all field types to add the underline back (useful for simulating grids with checkbox fields). Defaults to false. Set to true to enable for each field.
  • Updated internal JavaScript compiler to target ES2022. Previously targeted ES5, so some older browsers (pre 2021) may experience issues now.
  • Clearing a Lookup field value (using the 'X') will now trigger the callback function on the Lookup object if specified (passing a null value).

Example of new style/layout:

image

v3.3.6 - Unreleased (included in 3.4.0)

  • Added styling support for right-to-left languages, automatically detected by the dialog content.
  • Added a direction dialog option to override the automatic LTR or RTL direction.

v3.3.5 - 9 May 2024

  • Fixed an issue with the D365 "New look" which layered the lookup objects window behind the dialog.
  • Fixed alignment of some icons in the D365 "New look".
  • Fixed an issue where the dialog would sometimes display briefly before CSS loads in the D365 "New look".

v3.3.4 - 23 May 2023

  • Added 'viewIds' property to Dialog.Lookup options. The first view in the list is automatically set as the default view. This works the same as OOTB LookupObjects viewIds.
  • Fixed a bug with the addField function where lookup properties weren't binding correctly when updating an existing field.
  • Fixed a bug with the removeField function behaving unexpectedly when used multiple times on the same dialog.

v3.3.3 - 15 Apr 2023

  • Fixed bug where lookups would open the search panel more than once.

v3.3.2 - 17 Mar 2023

  • Deprecated the use of parent.Dialog / top.Dialog. This should no longer be used within HTML web resources.
    • Instead, load the alert.js script directly inside HTML web resources, and call Dialog functions normally, e.g. using: <script src="mag_/js/alert.js"></script>.
  • Deprecated .getCrmWindow(). This is meant to be used with parent.Dialog which is also deprecated now, and accessing the CRM form scripts from an HTML web resource is not best practice.
    • Instead, you should only be running code from within the HTML web resource. Try not to access scripts from other frames. This is particularly important now that CRM can display forms within forms.
  • Various internal fixes and improvements, including better support for embedded web resources.

v3.3.1 - 22 Nov 2022

  • Fixed bug where lookup/file input events weren't being bound correctly when added with the .fields() function after the dialog is initially shown.
  • Fixed .close() function to always close the dialog with the same ID, regardless of if it's the original object.
  • Various internal fixes and improvements.

v3.3.0 - 9 Nov 2022

  • Added new showCanvasApp function. Simply displays a canvas app from the current environment in a dialog iframe.
  • Added new dialog options for canvasAppName, webResourceName, iframeUrl, and iframeContent, which can be used with the .show() function instead of calling the specific showWebResource/showIFrame etc.
  • Added new dialog option for iframeQueryStrings, which can be used when showing an iframe, web resource, or canvas app, to pass additional query string parameters to the iframe.
    • Note: Query strings are passed through as an object, where each object property represents a key/value pair for each query string parameter.
  • Removed dependency on jQuery.
  • Added .getElement() function to query and return a specific HTML element inside a dialog (using Element.querySelector), or returns the outer dialog HTML element if no querySelector used, essentially replacing .get() which returned the jQuery object of the dialog.
  • Added .getElements() function to query and return an array of HTML elements (using Element.querySelectorAll). Similar to .getElement() but returns all matching elements instead of just the first.
  • Deprecated .get() function. Use .getElement() instead.
  • Deprecated jQuery dialog option and .jQuery() setter function.
  • Deprecated .$() function. Use .getElement() and .getElements() instead with built in .querySelector/.querySelectorAll etc for querying within a specific dialog.
    • Note: Querying outside the context of a dialog, or querying more than one opened dialog at a time is not supported.
  • Fields of type Custom now return the HTML Element (parent span) in the dialog response rather than a JQuery object for the same element.
  • Added new .addField() and .removeField() methods for adding or removing a single field without refreshing all dialog fields.
  • Undefined Dialog options are no longer added to the base dialog object as undefined.
  • OptionSet fields now return the original value(s) used to create the field, rather than converting to number. OptionSet values and default value now also supports other data types, e.g. objects or dates.
    • Single-select OptionSets would previously return values as string or as a number (if the string parses to number).
    • Multi-select OptionSets (OptionSet with the 'multiple' extra attribute set) would previously return an array of strings, regardless of whether the original values were numbers.

v3.2.0 - 3 Dec 2021

  • Added a fullscreen/restore button beside the close button. This is on by default for all dialogs (except when using showLoading). Can be hidden using preventResize.
  • Added a preventResize dialog option to hide and disable the new fullscreen/restore button, and to also disable the manual resize (drag bottom right corner).
  • Fullscreen now dynamically fills 100% of the page, and dialog resize and drag/drop features are disabled while in fullscreen.
  • Content is now aligned with the top of the dialog, rather than centered. This is to keep fullscreen view looking natural.
  • Dialog now scales in size if the page is minimised to be smaller than the dialog.
  • The .hide() and .remove() methods have been deprecated. A new .close() method has been added to replace both. The new .close() method acts the same as .remove() previously.
    • The .hide() method will still exist for backwards compatibility, and is still used by default when a dialog button is pressed to avoid issues with callbacks.
  • Added new columns option to both dialog options and group options. Allows for settings the "columns" CSS property to display fields in more than 1 column, and optionally with a min width, e.g. "100px 2".
  • Renamed the preventCancel dialog option/function to preventClose. The old preventCancel naming still exists for backwards compatability. This change is to make the name/purpose clearer and in line with other changes.
  • Fixed an issue where dialogs displaying an iframe would reload if another dialog is displayed on top (due to a change in 3.1.2 re-appending the dialog container each time)
    • Each dialog is now in a separate wrapper which allows for better layering.
  • Internal improvements to how file data is stored when using file picker input types.
  • Fixed an error caused by date inputs using a string or number as the default value (e.g. miliseconds since 1970 or an ISO date string). Using an actual Date object is still recommended wherever possible.
  • Fixed a bug where optionsets were returning 0 instead of null when no value was selected.
  • Fixed a CSS conflict where fields were sometimes inheriting styles from another file sharing the class name 'top'.
  • Fixed an error with date inputs that have a null or undefined default value when adding a field as an object rather than using new Dialog.Input().
  • Fixed an error that occasionally occurred where the Dialog object would be overwritten by a conflicting reference, resulting in some global variables being undefined.
  • Added showAsync method which is awaitable. Returns the dialog responses with the selected button. View example. E.g.:
var response = await new Dialog({ buttons: [new Dialog.Button("OK")], fields: [new Dialog.Input({ id: "input01" })] }).showAsync();
if (response.button.label === "OK") {
    var inputValue = response.data.input01;
}
  • Button callbacks can now return true or false with showAsync dialogs to allow or prevent the code execution from continuing.
    • When using async dialogs, button callbacks should still be used for validation which keeps the dialog open (preventClose=true), and only return true when validation passes, to continue code execution.
    • E.g. to resolve the promise and continue code execution, return true. If performing validation while the dialog stays open, return false.

v3.1.5 - 15 Jan 2021

  • Fixed a bug with iframes not filling the dialog height after v3.1.4.

v3.1.4 - 13 Jan 2021

  • The content and fields dialog options are now completely separate from each other, allowing content to be displayed above fields.
  • Fixed a bug where the inline: false option wasn't working for Lookup fields.
  • Lookups now show (No Name) if a selected value has no name, rather than appearing as an empty field.
  • Added a new Custom field type to allow inserting your own custom HTML elements between fields, or creating more advanced controls. Can be added to the fields array using 'new Dialog.Custom(options)'.
  • Lookups can now have a custom callback function to execute when a value is selected, i.e. to automatically trigger the next step in a process. This is set using the 'callback' Lookup Option.
  • Fixed a bug where the "Add Existing" button on N:N subgrids would disappear on forms where Dialog Builder is loaded.

v3.1.3 - 21 Nov 2020

  • Fixed an issue with Lookups not working properly in CRM Online classic mode (non-unified interface).
  • Lookups containing a selected value will now have a default cursor to show more clearly that the input is readonly.

v3.1.2 - 13 Nov 2020

  • The outer Dialog container will now be re-appended to the document each time a dialog is displayed, to ensure layering is correct (e.g. with inline forms, or lookup windows).
  • Fixed an issue in Chrome where a dialog couldn't be closed after navigating away from a form with a dialog displayed (e.g. after selecting +New from a lookup window).
  • Added support for multi-select lookups using the new allowMultiSelect (boolean) option on the Lookup Options (defaults to false).
  • When a lookup value has been selected, or is set by default, the lookup input will be readonly, and can only be cleared by clicking the 'X' beside the value, or by searching and selecting a different value.
  • When searching from a lookup field where an existing value has been selected, the searchText passed through to the lookup objects window will now be empty. Previously the existing selected value would be passed through as the searchText.
  • The 'X' to clear a lookup value no longer overlaps the lookup text when the text is long enough.
  • Added fields option to the base dialog options, and .fields() function to allow overwriting the active dialog fields. With these changes, .show() can be used instead of .showPrompt(), provided that fields have been set on the base options.

v3.1.1 - 14 Aug 2020

  • Fixed color not being applied to buttons added using the .buttons() function after a dialog has already been shown.
  • CSS webresource will now only be injected into the page when in the context of Dynamics 365 (i.e. Xrm.Page can access base URL) - otherwise CSS should be loaded manually on your webpage.
  • Added better support for disabling fields. This can be done using jquery, by setting the input/textarea "disabled" property, e.g.: Dialog.$("#fieldid input").prop("disabled", true);

v3.1.0 - 1 Jul 2020

  • New jQuery option to explicity pass through a jQuery reference to use, rather than finding it in parent etc.
  • Added support for TypeScript (with a full TypeScript definition file).
  • Updated Xrm.Page references to use Xrm.Utility (still supports Xrm.Page for pre-v9).
  • Fixed a bug where an empty "Group" caused getPromptResponses to crash. Empty Group will now return null.
  • New styles to match more closely with the Unified Interface.
  • Changed default padding on all dialogs and prompts to 20px (previously 30px), and 10px for iframes and webresources (previously 0px).
    • Due to this, and other styling changes, it is recommended to review existing dialogs to ensure content still fits as expected.
  • New color option to set the title and button color. Accepts valid CSS 'color' values, e.g. "#FF6A00", "rgb(0,0,0)", or "red" (but hex recommended for hover effect on primary buttons).
    • Color defaults to using the CRM theme's main color (unless explicitly set).
  • Dialogs can now be resized by dragging the bottom right corner of the dialog on supported browsers (not IE).
  • Dialogs can now be moved around the screen by dragging the top edge of the dialog.
  • Dialogs can now be toggled between fullscreen and their default size by double clicking the top edge of the dialog.
  • The icon option now accepts custom images by passing in a full or relative URL to an image (i.e. web resource).
  • The height, width, and padding options now accept valid CSS strings, e.g. "90%", "400px", "calc(100% - 10px)", or for custom padding: "20px 10px".
  • Major changes to dialog layout/CSS to be more dynamic and less dependent on JavaScript (no more tables!). This greatly improves the overall alignment and positioning of elements.
  • All HTML class/id's containing 'alert-js' or 'alertJs' changed to 'dialog-js' and 'dialogJs'.
  • Changed the way the title/message interacts with the icon. The title and/or message will now be vertically centered to the icon, and will dynamically scale/center depending on the size of the heading.
  • The content area has been separated from the title/message/icon to allow iframes/prompt fields to span the full width of the dialog, without being padded out because of an icon being used.
    • The content will also be vertically centered between the heading and buttons.
  • Removed the logic which vertically centered the dialog contents when the height was less than 251px. The heading (title/message/icon) will now vertically center automatically if no content is provided (i.e. for simple dialogs/loading bars), otherwise the heading will be top aligned, and the content will fill the remaining space.
  • Content scrollbar now appears on the edge of the dialog, rather than within the set padding.
  • Dialog buttons are now contained within the set padding. This allows for better alignment with dialog content - this may not look desirable with 0px padding.
  • Lookups now have a 'Clear' icon displayed at the end of the field when a value is set.
  • OptionSet fields without a default value will now display a '---' value by default. Previously the first option in the list would be selected by default, if a default value was not provided. The '---' option uses an empty string value, which returns null as a response.
  • Added .getValue(id) extension to the PromptResponse[] object, to make accessing values easier. Accepts an index or field ID, and returns the .value property. Can be strung together to access fields within a group, e.g.: data.getValue("group").getValue("field1");
  • Added .getSelected() extension to the PromptResponse[] object, to get a string[] of the field ID's for any with a 'true' value. Used to get only the selected fields from a group of radio or checkbox fields.
  • Added .getData() extension to the PromptResponse[] object, to get the values of the responses in a cleaner object structure which can be used with HTTP requests etc.
  • New inline option for all prompt fields and groups. Specifies whether a fields label should be inline with the field, or above the field. Group defaults to inline=false, while Input, MultiLine, OptionSet, and Lookup defaults to inline=true. Radio and Checkbox have their own styles which ignore this setting.
    • Groups can now be displayed inline for displaying lists of radio or checkbox fields etc.
  • Option setters now also update the values directly on visible dialogs (previously would require calling .show() again to see the new values), e.g.: var dialog = new Dialog().show(); dialog.title("Something");
  • When using a lookup field to search, the Dynamics 365 lookup objects window will now perform a search by default (showing all available records) even if no searchText is used.
  • Deprecated showDialogProcess, since Dialogs have been deprecated by Microsoft for a while, and showPrompt serves a similar purpose.
  • Changed the base Alert object to Dialog, e.g. new Dialog().show();
    • Alert still works exactly the same for backwards compatability.

Example of new style/layout:

image

v3.0.9 - 21 Oct 2019

  • Added options to Alert.Lookup for 'filters' and 'disableMru' (most recently used) in the Unified Interface from LookupObjects documentation
  • Deprecated the 'customFilters' Alert.Lookup options (replaced by filters). This will continue to work, but may be removed at a later date
  • Fixed input default values of zero being read as empty string
  • Fixed an issue where the CSS could be injected incorrectly when baseUrl is not available

v3.0.8 - 4 Jun 2019

  • Fixed issue where license wasn't being validated correctly when outlook is offline
  • Fixed an issue where getPromptResponses was returning null for lookup fields in the Unified Interface

v3.0.7 - 5 Oct 2018

  • Replaced unsupported Xrm.Internal.isUCI check with supported WebApi lookups

v3.0.6 - 27 Sep 2018

  • Fixed CSS conflict issue where Dynamics 365 Online was making multi line text fields inside the showPrompt alerts have a larger font than expected
  • Moved the Alert._jQuery reference into the Alert.$ function, to ensure the correct jQuery reference is retrieved from the page, even if overwritten
  • Updated Alert.$ to get the jQuery reference from the top window first, to avoid other solutions overwriting the jQuery reference on the CRM window

v3.0.5 - 24 Sep 2018

  • Internal fixes and improvements

v3.0.4

  • showPrompt OptionSet values now support tooltips via an optional "title" property, defaults to the "text"

v3.0.3

  • showIFrame now supports iframeContent as a second parameter to pass custom HTML in Chrome

v3.0.2

  • Added allowDismiss to all alert types, allowing the user to click outside the alert to close it

v3.0.1

  • Internal fixes and improvements

v3.0.0 - 7 Apr 2018

  • Added a new Alert.showPrompt function for easily capturing input of different types (see documentation for more detail)
  • Added a new Alert.getPromptResponses function for accessing field values from a prompt
  • Added support for nested/overlapping alerts with a new 'id' parameter on all functions (will overwrite existing alerts with the same id)
  • Updated styles to reflect v9.0 colours
  • Added new object constructor, which can be used alongside the new function constructors:
    • e.g. new Alert({ title: "Hello World", message: "Hello", width: 500, height: 300 }).show();
  • Added new function constructors to call all existing functions,
    • e.g. new Alert().title("Hello World").message("Hello").width(500).height(300).show();
    • Existing function calls still work using Alert.show() etc. however these will be deprecated in the future
  • Added the iFrame window context as the first and only parameter of the alert button callbacks when using Alert.showIFrame and Alert.showWebResource,
    • e.g. new Button("Close", function(iframeWindow) { alert(iframeWindow.document.getElementById("textbox").value); });
  • Added the prompt responses as the first and only parameter of the alert button callbacks when using Alert.showPrompt,
    • e.g. new Button("Update", function(responses) { Xrm.Page.getAttribute("name").setValue(responses[0].value); });
  • Updated showLoading function to include customizable options for things like title, message, icon, height, width
  • Added a fullscreen property
  • Added a new .remove() function to completely delete the alert, rather than just hiding it
  • Deprecated baseUrl parameter - when being used outside of CRM forms/views the CSS should be loaded onto the page manually
  • Updated the Alert.show function to accept jQuery objects into the content parameter (previously called message)
  • Added an additional message parameter to go above the content (for showing a message with an iframe/prompt etc)
  • Added a new SEARCH icon type
  • Added official support for Alert.$ to access alert dialogs using jquery
  • Added a .get() function to return the jquery object for the alert

v2.1.0 - 11 Oct 2016

Note: This is the last free version of Dialog Builder (Alert.js) which is no longer supported.

  • New methods for showing web resources, dialog processes, and custom iframes
  • Better support for working with iframes, like easily accessing the CRM form from the iframe, and easily accessing the iframe from the CRM form
  • New way of specifying custom padding on the alerts, to allow for 0 padding on iframes etc
  • Fixed layout and sizing issues when displaying messages with no title, or no buttons etc
  • Documentation for new methods

v2.0.0 - 30 Jul 2016

Version 2.0 makes the solution more supported, by creating our own lightbox instead of hi-jacking CRM's lightbox. This means the lightboxes work in outlook and all major browsers as well. Since it's no longer depending on CRM components, it's more likely this solution will work with future releases.

  • Backwards compatibility for v1.0, meaning you can upgrade to v2.0 without making any changes to existing code.
  • Uses custom lightbox instead of CRM lightbox, so no more slow HTML web resource loading, and no more modal dialogs in outlook, just 100% lightbox everywhere! Even on the tablet client!
  • New "LOADING" icon available.
  • New constructor for creating buttons: new Alert.Button(label, callback, setFocus, preventClose).
  • Ability to set focus to a particular button by default, or for single button alerts focus will automatically be set to the only button (unless explicitly set to false).
  • Ability to keep the alert open after clicking a certain button (for download log type functionality).
  • Ability to display trace logs etc by encoding the messages using the Alert.htmlEncode(text) function.
  • Displays larger messages nicely with a vertical scroll bar.
  • Ability to hide the 'X' button on the alert, to force users to select one of the available buttons.
  • Added functionality to hide the buttons bar if no buttons are specified (by passing in an empty array).
  • Added a new function to allow developers to close the alert using code: Alert.hide(). This can be used to close the alert after a background process completes, for example to close a "loading" alert.
  • Added better error handling if callback functions crash.
  • Added functionality to 'top align' the message and icon if the alert height is greater than 250, to make displaying larger errors such as trace logs nicer.
  • Moved the solution prefix into a global variable which can be updated more easily if you want to maintain your own publisher prefixes on the web resources.
  • Changed the default height and width variables to look nicer with the new styles.
  • One important change is that displaying multiple alerts at once is no longer supported, and so calling Alert.show() multiple times will now overwrite the previous alert instead of stacking them.
  • Added a new function called Alert.showLoading() which is simply a wrapper for calling the Alert.show() with some default values to display a nice "Loading..." message for locking the UI if you're doing some important async tasks etc.

v1.1.0 - 12 Aug 2015

  • Fixed for CRM Online (2015 SP1)

v1.0.0 - 5 Aug 2015

First public release on CodePlex until its shutdown and move to Github on 6 Jul 2017. Uses an internal (unsupported) MS library to display a dialog with custom messages and buttons.