0

I want to add another button to Lightning-Confirm so that I can redirect users to another community page on click of that. Is it possible to do so?

Another way I'm looking for is to add a URL in the message so if they click on that they'll be redirected.

enter image description here

Below is my code snippet:

strong text

const result = await LightningConfirm.open({
                message: "You have existing applications on file. Please proceed to the 'My Applications' page to review existing applictions. If you wish to continue with a new application, select 'OK'.",
                variant: 'headerless',
                label: 'this is the aria-label value',
                theme: 'warning'
                // setting theme would have no effect
            });
            if(result === true){
                this.handleCreate();
            }
handleCreate(){
   // My code to create application
}

1 Answer 1

1

We cannot add an extra button to the Lightning-Confirm component. The Lightning-Confirm component only supports two buttons, OK and Cancel, by default. There is no option to customize the number or the label of the buttons.

If you want to create a custom modal with more than two buttons, you can use the Lightning-Modal component instead. The Lightning-Modal component allows you to create a custom modal with a header, a body, and a footer. You can add any number of buttons or other elements to the footer and handle the click events accordingly.

Here is an example of how you can create a custom modal with three buttons using the Lightning-Modal component:

customModal.html

<template>
        <lightning-button label="Open Modal" onclick={handleOpenModal}></lightning-button>
        <lightning-modal if:true={isModalOpen} header="Custom Modal">
                <div slot="modal-body">
                        <p>This is a custom modal with three buttons.</p>
                </div>
                <div slot="modal-footer">
                        <lightning-button label="Yes" variant="brand" onclick={handleYesClick}></lightning-button>
                        <lightning-button label="No" variant="neutral" onclick={handleNoClick}></lightning-button>
                        <lightning-button label="Cancel" variant="destructive" onclick={handleCancelClick}></lightning-button>
                </div>
        </lightning-modal>
</template>

customModal.js

import { LightningElement, track } from 'lwc';

export default class CustomModal extends LightningElement {

        @track isModalOpen = false;

        // handle the open modal button click
        handleOpenModal() {
                this.isModalOpen = true;
        }

        // handle the yes button click
        handleYesClick() {
                console.log('Yes clicked');
                // close the modal
                this.isModalOpen = false;
        }

        // handle the no button click
        handleNoClick() {
                console.log('No clicked');
                // close the modal
                this.isModalOpen = false;
        }

        // handle the cancel button click
        handleCancelClick() {
                console.log('Cancel clicked');
                // close the modal
                this.isModalOpen = false;
        }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .