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:-
1.Replace the necessary field with your dataset fields & add your own Info details in place of "Your info details here".
2.dataset_infotext is your dataset field which will get the info from your dataset

<div class="row my-5" style="margin:80 ">
  <div class="col-md-5 px-lg-10" style=" margin-left: auto; margin-right: auto;">
    <!-- Add from here to add more indicator -->
    <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>
    <!-- Add till here to add more indicator -->
    <!-- keep adding -->
  </div>
  
</div>

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