Hello @DryChips,
Looks like Kendo library is not loaded on this form. kendoDialog only works if an element using the Kendo library is added to the form.
You can open dialog window with custom a custom html content using the code:
Dialog.open({template: '<h1>Hello!</h1>'}, arguments, callback(bool, args), options);Hi,
I have found this code in your documentation and it made sense after running the code:
//Opens HTML Custom Dialog
Dialog.open({
template: `<div>
<p style="text-align:center;">To check for a position title, please head to the Power BI Position Matrix report otherwise, please close this dialog and submit this form to request a new position.</p>
</div>
<div class="d-flex mt-4 gap-3">
<button type="button" class="btn btn-primary flex-fill" id="okButton">Power BI Position Matrix</button>
<button type="button" class="btn btn-outline-primary flex-fill" id="cancelButton">Cancel</button>
</div>`
}, null, null, {
width: 988,
height: 500,
title: 'Where do I find a relevant position?',
open: (e) => {
var dialogBody = e.sender.element;
var okButton = dialogBody.find('#okButton');
okButton.click(() => {
//code to process OK result
window.open("http://cmft-sp-wfe/sites/departments/hr/Workforce1/Hospital_Pages/SitePages/Position_Matrix.aspx")
Dialog.close();
});
var cancelButton = dialogBody.find('#cancelButton');
cancelButton.click(() => {
//code to process CANCEL result
Dialog.close();
});
}
});
Do you know, how I can style the buttons in the dialog? I don't like the layout and colors used.
Another thing I noticed is the spinner animation (see video below). Can I remove this?
You can add style attribute to define element appearance:
<button type="button" class="btn btn-primary flex-fill" id="okButton" style="background: red">Power BI Position Matrix</button>
I tested your code and there is no spinner on my form, so I can't tell what is causing it. You can try hiding the spinner by its CSS class:
.fd-form-loading {
display: none !important;
}