Hsl.Dialog
Methods in this namespace display a dialog UI on the form. It is not supported to use these methods except on HTML Web Resources.
open
Hsl.Dialog.open(options: DialogOptions): DialogContext;
Opens a dialog with the specified settings.
function dialogInputs() {
Hsl.Dialog.open({
title: 'Inputs Example',
contentHtml: `<label>Text <input type='text' id='myText' /></label><br /> <br /> <label>Check <input type='checkbox' id='myCheckbox' value='Checked!' /></label>`,
buttons: [{
label: 'Ok',
action: function (e) {
const values = e.inputs();
const text = values['myText'] || 'No text entered.';
const checked = values['myCheckbox']; // This will be either null if unchecked or the value of the input ('Checked!') if checked.
Hsl.Dialog.alert('Text: ' + text + ' Checked: ' + checked);
e.close();
}
}]
});
}
function dialogWithGeneratedContent() {
// For complex content, consider using a framework like React instead of jQuery.
const curMonth = new Date().getMonth();
const monthNames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
Hsl.Dialog.open({
title: null,
contentHtml: `<div id='hsl_content'></div>`,
onOpen(ctx) {
const pnl = ctx.find('#hsl_content');
// create an input for each month so far this year.
for (let i = 0; i <= curMonth; i++) {
const id = 'actual' + i;
const rowDiv = ctx.$(`<div></div>`).appendTo(pnl);
$(`<label style='width: 8em; display: inline-block;'></label>`)
.attr('for', id)
.text(monthNames[i])
.appendTo(rowDiv);
$(`<input id='${id}' />`)
.attr('id', id)
.appendTo(rowDiv);
}
},
buttons: [{
label: 'Submit',
action(ctx) {
const values = [];
const inputs = ctx.inputs();
for (let i = 0; i <= curMonth; i++) {
const id = 'actual' + i;
const val = inputs[id];
if (!val) {
Hsl.Dialog.alert('Please enter a value for ' + monthNames[i]);
return;
}
values.push(val);
}
Hsl.Dialog.alert('Values: ' + values.join(', '));
ctx.close();
},
}, {
label: 'Cancel',
action(ctx) {
ctx.close();
},
}],
});
}
function renderEffectiveGrid() {
Hsl.Dialog.open({
contentHtml: `<div id='grid'></div>`,
contentCss: 'hsl_/EffGrid/Grid.css',
onOpen(ctx) {
const win = ctx.getWindow();
win.Xrm = Xrm;
Hsl.loadScriptResource('hsl_/EffGrid/Grid.js', win).then(() => {
win.Hsl.effectiveGrid({
entityName: 'account',
});
}).catch(Hsl.Dialog.showError);
},
});
}
openBusy
A convenience function that opens a busy dialog as specified by the options argument.
Same as open except:
title
will default to"Please wait..."
hideClose
defaults totrue
progress
default to1
Hsl.Dialog.openBusy(options: DialogOptions): DialogContext;
function openBusyBasic() {
const client = Hsl.WebApi.getClient('9.1');
const dlg = Hsl.Dialog.openBusy();
client.create('account', {
name: 'Abc',
}).then(accountId => {
Hsl.Dialog.confirm('Account created do you want to open it now?').then(response => {
if (response.confirmed)
Hsl.openEntityForm('account', accountId);
});
}).catch(Hsl.Dialog.showError).then(dlg.close);
}
function openBusyWithProgress() {
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
const client = Hsl.WebApi.getClient('9.1');
const dlg = Hsl.Dialog.openBusy();
Hsl.PromiseHelper.serialMap(items, (itemInfo, ix) => {
dlg.update({
progress: ix / items.length,
text: `Processing record ${ix + 1} of ${items.length}`,
});
return client.create('account', {
name: itemInfo.toString(),
});
}).then(accountIds => {
Hsl.Dialog.alert(`Created ${items.length} accounts.\r\nIds: ${accountIds.join(', ')}`);
}).catch(Hsl.Dialog.showError).then(dlg.close);
}
alert
Opens an alert dialog showing the given message. After the dialog is closed, onCloseCallback is called. A built in dialog is used in CRM for Tablets. When a built in dialog is used, the options parameter is ignored.
Hsl.Dialog.alert(message: string): Promise<void>;
confirm
Opens a dialog that prompts the user with the given message and the user can select 'ok' or 'cancel'. The button the user clicks determines which callback is executed.
A built in dialog is used in CRM for Tablets. When a built in dialog is used, the options parameter is ignored.
Hsl.Dialog.confirm(message: string): Promise<ConfirmResult>;
interface ConfirmResult {
confirmed: boolean;
}
showErrorWithDetails
A convenience function that opens an error dialog showing an error message with details below it. The details will be collapsed by default but can be expanded by the user. Context is an optional parameter that is prepended to the message. For example, ShowErrorWithDetails(ex.message, ex.toString(), "Error updating goal " + goalName + ". ") might display: "Error updating goal Chris's 2014 Sales. The server returned no response."
Hsl.Dialog.showErrorWithDetails(error: string, details: string, opts?: DialogOptions) : DialogContext;
Hsl.Dialog.showErrorWithDetails(error: string, details: string, context?: string, opts?: DialogOptions) : DialogContext;
function showErrorWithDetailsSample() {
// Use the details parameter for content that wouldn't generally be relevent to the end user but might help an
// admin troubleshoot a reported issue.
Hsl.Dialog.showErrorWithDetails('Unable to setup account', `Uncaught (in promise) Error: An error occurred while validating input parameters: Microsoft.OData.ODataException: Does not support untyped value in non-open type.
at System.Web.OData.Formatter.Deserialization.DeserializationHelpers.ApplyProperty(ODataProperty property, IEdmStructuredTypeReference resourceType, Object resource, ODataDeserializerProvider deserializerProvider, ODataDeserializerContext readContext)
at System.Web.OData.Formatter.Deserialization.ODataResourceDeserializer.ApplyStructuralProperties(Object resource, ODataResourceWrapper resourceWrapper, IEdmStructuredTypeReference structuredType, ODataDeserializerContext readContext)
at Microsoft.Crm.Extensibility.CrmODataEntityDeserializer.ApplyStructuralProperties(Object resource, ODataResourceWrapper resourceWrapper, IEdmStructuredTypeReference structuredType, ODataDeserializerContext readContext)
at System.Web.OData.Formatter.Deserialization.ODataResourceDeserializer.ReadResource(ODataResourceWrapper resourceWrapper, IEdmStructuredTypeReference structuredType, ODataDeserializerContext readContext)
at System.Web.OData.Formatter.ODataMediaTypeFormatter.ReadFromStream(Type type, Stream readStream, HttpContent content, IFormatterLogger formatterLogger)
at Object._parseWebApiError (library.core.js:2140)
at Object.processFail (library.core.js:3535)
at readyStateComplete (library.core.js:1745)
at XMLHttpRequest.xhr.onload (library.core.js:1718)`);
}
showError
A convenience function that opens an error dialog described in ShowErrorWithDetails showing an error message with details below it. The details will be collapsed by default but can be expanded by the user. This method is designed to work well with any error but is especially helpful when dealing with errors from the SOAP or WebAPI endpoint.
Hsl.Dialog.showError(error: Error, context?: string, opts?: DialogOptions) : DialogContext;
function showErrorSample() {
const client = Hsl.WebApi.getClient('9.1');
const dlg = Hsl.Dialog.openBusy();
client.create('account', {
name: 'Abc',
}).then(accountId => {
Hsl.Dialog.confirm('Account created do you want to open it now?').then(response => {
if (response.confirmed)
Hsl.openEntityForm('account', accountId);
});
}).catch(err => {
Hsl.Dialog.showError(err, 'An error occured creating the account.');
}).then(dlg.close);
}
showSpinner
Displays a full page spinner while spinner is opened. The returned object from showSpinner has a close() method to close the spinner.
Hsl.Dialog.showSpinner(opts?: ShowSpinnerOptions): SpinnerDialogContext;
The options object passed to showSpinner has the following optional settings: • parentWindow: Window - which controls which window is overlaid with the spinner. • minDisplayTime: number – Minimum number of milliseconds for the dialog to display. This can be useful if you're doing something like saving changes and want to be sure that the user sees the spinner so that they get feedback that their button click happened.
interface SpinnerDialogContext { /** Closes the spinner. */ close(): void; }
function saveChanges() {
const spinner = Hsl.Dialog.showSpinner({ minDisplayTime: 500 });
Hsl.WebApi.client.update({
entityType: 'account',
id: '{DF39367D-CF71-4034-BEAD-247D3F82577D}',
}, {
name: 'Updated Name',
})
.catch(Hsl.Dialog.showError)
.then(spinner.close);
}