0

I am trying to retrieve JavaScript Static resource in Community lightning component to override the numbering from Unescaped html. But the data locker service is blocking the script.

Am trying to customize CSS numbering, so I have added Custom CSS to lightning component from Static resource.But the unescaped HTML is not catching <ol start="6"><ol> instead of starting from 6,ordered list is starting from 1. So I have written the below JS to override this to start from "6" but data locker service is blocking. How can I avoid this?

I want to display my ordered list in Lightning component similar to the fiddle below

https://jsfiddle.net/stv05gph/

    var ol = document.querySelectorAll("ol");
    for (i = 0; i <= ol.length - 1; i++) {
      var index = parseInt(document.getElementsByTagName("ol")[i].getAttribute("start")) - 1;

        if (!isNaN(index)) {
            document.getElementsByTagName("ol")[i].style = "counter-reset:li " + index;
        }
    }
  • From other similar posts everyone recommends to" call function from controller JS".In this case How can I call this function from controller JS afterscriptloaded ? – rdredd Apr 18 '19 at 18:50
  • Are you sure you can't do that without javascript? What is your unescaped HTML? – JF Paradis Apr 18 '19 at 18:59
  • 1.We are using Unescaped Html to Style the <ol><li> with Circled Numbers instead of standard list(numbers) with Custom CSS from Static resource. 2. Raw html incoming from richtext field has <ol start ="6">.Instead of list Starting from "6" list is starting from 1 when there is <ul> in <ol> which means the order list is breaking when there is unordered list(sub bulleting) . 3.To override this, I have written JS to ovveride the Start Number so when ever the <ol> breaks it increments the "start" so that next lis<li> start from next number. @JFParadis – rdredd Apr 18 '19 at 19:15
1

The problem is that <aura:unescapedHtml> doesn't allow you to access its content. You can achieve the same thing with a <div> and use innerHTML.

Here, I'm also starting the querySelectorAll call on the <div>, instead of calling it on document, which could return different results depending on the page.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" > 
    <ui:button label="test list" press="{!c.press}"/>
    <div aura:id="container"></div>
</aura:component>
({
    press : function(cmp, event, helper) {
        var HTML =  '<ol ><li>First</li><li>Second</li></ol><p></p><ol start="3" ><li>First</li><li>Second</li></ol><ol start="6" ><li>First</li><li>Second</li></ol>';

        var div = cmp.find('container').getElement();
        div.innerHTML = HTML;

        var ol = div.querySelectorAll("ol");
        for (var i = 0; i <= ol.length - 1; i++) {
            var index = parseInt(document.getElementsByTagName("ol")[i].getAttribute("start")) - 1;

            if (!isNaN(index)) {
                document.getElementsByTagName("ol")[i].style = "counter-reset:li " + index;
            }
        }

    }
})

Here is the result on my test org, after pressing the button:

div data-aura-rendered-by="344:0">
   <ol>
      <li>First</li>
      <li>Second</li>
   </ol>
   <p></p>
   <ol start="3" style="counter-reset: li 2;">
      <li>First</li>
      <li>Second</li>
   </ol>
   <ol start="6" style="counter-reset: li 5;">
      <li>First</li>
      <li>Second</li>
   </ol>
</div>
| improve this answer | |
  • Thank you very much ..Added Some CSS to the file ..Now working as expected .Thanks again Paradis – rdredd Apr 19 '19 at 15:41

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.