Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to style spModal buttons?

Flavio7
Kilo Contributor

Hi, I have a particular Catalog item
(dev.service-now.com/sp?id=global_sc_item_details&sys_id=47aeb6254f8dee4064c83c728110c7a9&clv=lock)

which requires confirmation before submission.
I've done a Client Script onSubmit to open a modal window and ask for Confirmation:

function onSubmit() {

    var hasUserConfirmedAgreement = g_form.getBooleanValue("hasUserConfirmedAgreement");
    var modalContent = g_form.getValue("modalMessage");
    var primaryLabel = getMessage("Agree");
    var cancelLabel = getMessage("Cancel");

    if (!hasUserConfirmedAgreement && g_form.getValue("u_eus_sr_priviledge_action") == "NEW") {
        if (typeof spModal != 'undefined') {
            spModal.open({
                    message: modalContent,
                    title: 'Responsability Agreement',
                    footerStyle: {},
                    size: "lg",
                    buttons: [{
                            label: cancelLabel,
                            cancel: true
                        },
                        {
                            label: primaryLabel,
                            primary: true
                        }
                    ]
                }

            ).then(function(confirmed) {

                g_form.setValue("hasUserConfirmedAgreement", confirmed);
                if (confirmed) g_form.submit();
            });
        }
        return false;
    } else {
        return true;
    }



}

Is there some way to apply specific CSS to those buttons?
May I define some class for them?
They got the standard sp-bootstrap properties...

Thank you!

1 ACCEPTED SOLUTION

Pranav Bhagat
Kilo Sage

Add the code in your CSS of the page like this

div.card-block > p {
    /* your css ... */
}

You have to dig into the class.

example

find_real_file.png

 If you want style the button do

div > button >.btn{

  /* your css ... */

}

Regards

Pranav

View solution in original post

3 REPLIES 3

Pranav Bhagat
Kilo Sage

Add the code in your CSS of the page like this

div.card-block > p {
    /* your css ... */
}

You have to dig into the class.

example

find_real_file.png

 If you want style the button do

div > button >.btn{

  /* your css ... */

}

Regards

Pranav

Flavio7
Kilo Contributor

Made my day! 🙂 thank you

Ur Welcome 

 

Here's another example

find_real_file.png