Dialog, popup to confirm choice

Forms SharePoint 2019
1

Hi guys,
I have got a button in the edit form. It's called "Informovat," and when I click on this button, a small popup or modal shows up, and the user should have the choice to choose "Yes" or "No" - based on it, I will update another field or not.
Something like this does not work.

window.informovat = () => {
const elInformovat = fd.control("butInformovat").$el;
fd.field("boolInformovano").value = 1;
$(elInformovat).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function () {
.......
},
Cancel: function () {
$(this).dialog("close");
},
},
});
};

Could you help me?
Or I can use Dialog.open(), but I do not need to open another form, just a modal with confirmation.
I would appreciate your help on how to proceed.
Thank you so much.
Steo

2

Hello @Stepan,

You can use the default confirmation box:

if (confirm('Are you sure you want to submit the form?')) {
    //do something
}

Or try out the Kendo Dialog.

Add the element with the following code to the form using HTML control:

<div id="dialog"></div>

This code to the JavaScript editor:

window.$ = $;

fd.spRendered(function() {
    $("#dialog").kendoDialog({
        width: "400px",
        title: "Software Update",
        closable: false,
        visible: false,
        modal: true,
        content: "<p>Do you confirm this action?<p>",
        actions: [{
                text: 'NO'
            },
            {
                text: 'OK',
                primary: true,
                action: function(e) {
                    //do something
                    fd.field('Title').value = 12;
                    return true;
                }
            }
        ]
    });
});

And this code to the button's Click property:

var dialog = $("#dialog").data("kendoDialog");
dialog.open();
2 Likes
3

Thank you @mnikitina ,
I will try that as soon as possible, but it looks very promising :slight_smile:
Steo

1 Like
4

Hi, it works perfectly with predefined values! :slight_smile:
Now, I do not know what approach to choose to pass parameters to kendoDialog.
My code:

$("#dialog").kendoDialog({
width: "400px",
title: ${anyVariable},
closable: false,
visible: false,
modal: true,
content: ${anyVariable}<p>, //Pass variable
actions: [
{
text: "ANO",
primary: true,
action: function (e) {
const itemID = fd.itemId;
const listName = ${anyVariable}
const wfNme = ${anyVariable};
//
console.log(itemID);
wfNme === "" ? true : startWfOnListItem(itemID, listName, wfNme);
},
},
{
text: "NE",
},
],
});

I have tried some approaches, but none of them worked at all.
Long story short: I need one element #dialog and one function that accepts parameters to kendoDialog based on my conditions like - 1st Phase, 2nd Phase,.. there are more than 10 phases.
Thank you for your reply.
Steo

5

Hello @Stepan,

Have you tried creating a global variable?

fd.spRendered(function() {
    globalvar = 'some value';
    $("#dialog").kendoDialog({
        width: "400px",
        title: "Software Update",
        closable: false,
        visible: false,
        modal: true,
        content: "<p>Do you confirm this action?<p>",
        actions: [{
                text: 'NO'
            },
            {
                text: 'OK',
                primary: true,
                action: function(e) {
                    //do something
                    fd.field('Title').value = globalvar;
                    return true;
                }
            }
        ]
    });

});
6

Can we wrap it up in the function?
Like this:
fd.spRendered(function () {

  const openDialog = (titleName, contentNote) => {

    globalvar = "some value";

    $("#dialog").kendoDialog({

      width: "400px",

      title: titleName,

      closable: false,

      visible: false,

      modal: true,

      content: contentNote,

      actions: [

        {

          text: "NO",

        },

        {

          text: "OK",

          primary: true,

          action: function (e) {

            //do something

            fd.field("Title").value = globalvar;

            return true;

          },

        },

      ],

    });

  };

});
7

Hello @Stepan,

If you want to change the dialog title and content dynamically please use this code when calling a dialog:

var dialog = $("#dialog").data("kendoDialog").title('new title').content("<p>Confirm?<p>");
dialog.open();
8

I am having trouble making this work. I have the same code used in another form and it works without issue. I am not sure if I missed a step but I am unable to figure this out.

Here is what I have in my javascript window:
image

Here is what I have in the designer:

image
image900×41 1.29 KB

Here is what the button onclick propery has:
image

When the form renders I receive the following error:

image
image744×94 4.84 KB

9

Hello @cwalter2,

Is this the complete code you have in the form? Are the two forms in the same site collection?

10

@mnikitina, The two forms are on the same site. The is other code but it is pretty basic. I have commented out all other code and still receive the same error.

11

@cwalter2,

Which SharePoint version are you using? Online or On-premises?

Please export the form and share it with me, I'll test the code.

12

@mnikitina ,
We use SharePoint Online. Here is the form:
Item_Edit_ProjectMarkups.xfds (12.6 KB)

13

Hello @cwalter2,

Thank you! I had to consult with developers.

Please add this code to Button's click property to open a dilalog:

var dialog = Dialog.open(null, null, null, {
        width: "400px",
        height: "175px",
        title: "Software Update",
        //instead of closable false use actions https://docs.telerik.com/kendo-ui/api/javascript/ui/window/configuration/actions
        actions: [],
        visible: false,
        modal: true,
        // important to set iframe to false
        iframe: false,
        content: {
            template: `<div>Do you confirm this action?<div>
					   <div class="d-flex mt-4 gap-3">
							<button type="button" class="btn btn-primary flex-fill" id="okButton">OK</button>
							<button type="button" class="btn btn-outline-primary flex-fill" id="cancelButton">Cancel</button>
						</div>`
        },
        open: (e) => {
           var dialogBody = e.sender.element;
           
           var okButton = dialogBody.find('#okButton');
           okButton.click(()=>{
              // add some code to process OK result
              Dialog.close();
           });
           
           var cancelButton = dialogBody.find('#cancelButton');
           cancelButton.click(()=>{
              Dialog.close();
           });
        }
    });

    // hack to hide loading statement
    dialog.refresh();

Note that you must define the Dialog function globally like so:
image

14

Hi @mnikitina,

Is it possible to style this dialog using CSS?

15

Hello @DryChips,

Yes, you can style the content of the dialog as a general HTML page.

16

Awesome, is that through the HTML added on the form or through the JavaScript Code below?

window.$ = $;

fd.spRendered(function() {
    $("#dialog").kendoDialog({
        width: "400px",
        title: "Software Update",
        closable: false,
        visible: false,
        modal: true,
        content: "<p>Do you confirm this action?<p>",
        actions: [{
                text: 'NO'
            },
            {
                text: 'OK',
                primary: true,
                action: function(e) {
                    //do something
                    fd.field('Title').value = 12;
                    return true;
                }
            }
        ]
    });
});
17

@DryChips,

How exactly do you want to style the dialog box? Do you need to style the dialog box content?

18

Just generic styling options really.

For example, changing background color, border color, button color, text color etc...

19

@DryChips,

You can change the dialog styling using the CSS. For instance, to change its background:

.k-dialog {
     background: lightgrey;
}

The same is for buttons and content.

Or you can change the styling of the dialog content by updating the HTML code. Make the text bolded and red:

"<p style='color: red; font-weight: bold;'>Do you confirm this action?<p>"
1 Like
20

Hi,

Is it possible to call the KendoDialog onChange?

I have added the codes below inside the fd.spRendereed

//Dialog will appear when a record is found
     $("#dialog").kendoDialog({
        width: "400px",
        title: "ATTENTION",
        closable: false,
        visible: false,
        modal: true,
        content: "<p>This user already has a record. Please edit this in the User Access Library.<p>",
        actions: [
                      {text: 'Close', primary:true}
                     ]
    });

//Dialog appears when a record is not found
     $("#dialog2").kendoDialog({
        width: "400px",
        title: "ATTENTION",
        closable: false,
        visible: false,
        modal: true,
        content: "<p>This User does not exist, please create a new record.<p>",
        actions: [
                    {text: 'Close', primary:true}
                     ]
    });

//This function will show the Position message when question 2 is answered "No"
function PosMessage(){
    if(fd.field('Question_2').value == 'No') {
    $('.Position-Message').show();
    fd.field('Terms').clear();
    fd.field('Terms2').clear();
    var dialog = $("#dialog").data("kendoDialog");
    dialog.open();
    }
    else{
    $('.Position-Message').hide();
    }
 };

//call function when a user changes status for Question 2
fd.field('Question_2').$on('change',PosMessage);

I get an error in the console on change of drop-down Question 2:

image
image1903×176 12.1 KB