Score Breakdown

Score Breakdown

1.In the Scorecard Container HTML replace <! -- Scorebreakdown snippet --> with below snippet, update the version of the HTML file & upload the file to get the shown output.
Note:-
a.Replace the necessary field with your dataset fields & add your own Info details in place of "Your info details here".
b.dataset_infotext is your dataset field which will get the info from your dataset
2. Make sure to replace the dataset_infotext & datsetfield by reffering to the specified field as explained in Source Data
3. Go to the Source Sheet & Replace them with respective info text.
4. Replace Replace_with_Dataset_Field_RESPONSE ,Replace_with_Dataset_Field_Pillar_Total, Replace_with_Dataset_Field_out_of with the respective filed from Source Data Sheet as explained in Source Data.
5. In the below snippet replace <! -- keep adding --> with all the HTML between <! -- Add from here to add more indicator --> & <! -- Add till here to add more indicator --> & add it there. Make sure you change the ID from #demo1, #demo2, #demo..., #demon.

    <!-- Add from here to add more indicator -->
        <div class="col-md-5 px-lg-10" style=" margin-left: auto; margin-right: auto;">
        <div class="collapse-item">
          <scorebreakdown-pillar *ngIf="dashboard.isdashboarddataLoaded"
           pillarName="Pillar_Name"
           pillarPercentage="replace_with_your_field_name"
           pillarInfoText="dataset_pillar_infotext"
           collapseId="#demo..."
           ></scorebreakdown-pillar>

          <div class="collapse" id="demo...">
            <div class="d-flex align-items-center sc-collapse-content-inner">
              <p class="mt-3">Your Indicator Name
                <button type="button" class="card-info" data-toggle="tooltip" data-box="popover" data-placement="auto"
                  data-trigger='hover' [attr.data-content]="dashboard.data['dataset_infotext']">
                  <i aria-hidden="true" class="fa fa-info-circle"></i>
                </button>
              </p>
              <p class="ml-auto"><span>{{dashboard.data['Replace_with_Dataset_Field_RESPONSE']}}</span></p>
            </div>
            <div class="d-flex align-items-center sc-collapse-content-inner">
              <p>Your Indicator Name <button class="card-info" data-toggle="tooltip" data-box="popover"
                  data-trigger='hover' data-placement="right" [attr.data-content]="dashboard.data['dataset_infotext']"><i aria-hidden="true"
                    class="fa fa-info-circle"></i></button>
              </p>
              <p class="ml-auto"><span>{{dashboard.data['Replace_with_Dataset_Field_RESPONSE']}}</span></p>
            </div>
            <div class="d-flex justify-content-end sc-collapse-content-total">
              <p>Total: <span>{{dashboard.data['Replace_with_Dataset_Field_Pillar_Total']}}/{{dashboard.data['Replace_with_Dataset_Field_out_of']}}</span></p>
            </div>
          </div>
        </div>
      </div>
  <!-- Add till here to add more indicator -->
  <!-- keep adding -->