0

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

$A.createComponent(
    "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") {
            objModalLibrary.showCustomModal({
                header: "Remove File",
                body: objModalHTMLCode,
                showCloseButton: true
            });
        }
    }
);

handleCancel : function(objComponent, objEvent, objHelper) {
    //closes the modal or popover from the component
    objComponent.find("popuplib").notifyClose();
},

removeFromFile : function(objComponent, objEvent, objHelper) {
    //closes the modal or popover from the component
    console.log('objComponent');
},

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

Update

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.
0

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"), ... ],
   ...
];
$A.createComponents(
  cmps, 
  function(cmp, status) { 
    if(status === "SUCCESS") {
      cmp[0].appendChild(cmp[1]);
      cmp[0].appendChild(cmp[2]);
      // build up other component refs
      objModalLibrary.showCustomModal({
        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.

  • 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 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.