I have created dynamic component but somehow the event is not getting generated :

    "aura:unescapedHtml", {
        "value": '<div class="slds-notify_toast slds-theme_default" role="status" style="width: 97%;">' +
            '<i class="fa fa-ban fa-lg" style="color:white"></i>&nbsp;&nbsp;<h2 class="slds-text-heading_small ">' +
            $A.get("$Label.c.ConfirmRemoval") + '</h2></div>' +
            '<button type="button" class="btn btn-default" data-dismiss="modal"\n' +
            'onclick="{!c.handleCancel)">$A.get("$Label.Cancel")</button>\n' +
            '<button type="button" class="btn btn-primary" onclick="{!c.removeFromFile}">$A.get("$Label.Yes"</button>'
    function(objModalHTMLCode, strStatus){
        if (strStatus === "SUCCESS") {
                header: "Remove File",
                body: objModalHTMLCode,
                showCloseButton: true

handleCancel : function(objComponent, objEvent, objHelper) {
    //closes the modal or popover from the component

removeFromFile : function(objComponent, objEvent, objHelper) {
    //closes the modal or popover from the component

The controller layer is not called. Is there something I am missing ?


I can see this error in Chrome console:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-08afc08f-16d4-094f-bacb-*********' chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net *.********.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

What you're trying to do is impossible. aura:unescapedHtml will prevent your component code from interacting with the elements inside of it, and you can't attach arbitrary code in the HTML, because that would allow a developer to bypass Locker Service security restrictions.

Instead, you would need to create all the individual elements and set the method names by reference.

// Incomplete sample code
var cmps = [
   [ "div", { class:"slds-notify_toast slds-theme_default", ... ],
   [ "button", { onclick: component.getReference("c.handleCancel"), ... ],
  function(cmp, status) { 
    if(status === "SUCCESS") {
      // build up other component refs
        header: "Remove File", body: cmp, showCloseButton: true

Overall, this is highly impractical and may have some parts that you still can't do correctly. I would advise against trying to do this. Simply create a new component and use it directly, or use standard component library components instead of trying to render normal HTML. You'll greatly reduce the amount of code you need to write, and won't run in to nearly as many problems.

| improve this answer | |
  • Yes I figured so, So I am using the way you suggested to have another lightning component open as a modal. – Nagendra Singh Jul 21 '19 at 4:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.