How to stop source control editor from stripping Id's from html?

[Jim01]

I am attempting to use the source code editor to insert the HTML for a Bootstrap accordion panel in a section of the website.  The problem is that when I save, all of the id's are being stripped from the html.  These ID's are needed for the Bootstrap to work.  

Edit: for example, here is one line of HTML containing an ID:

<div class="panel-heading", role="tab" id="headingOne">

after I save it gets changed to:

<div role="tab" class="panel-heading">

How do I stop this behavior?

Edit: Here is the HTML for the section I am dealing with.  This is AFTER the IDs have been removed:

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: center; min-height: 200px; background: rgb(255, 255, 255); padding: 8px; margin: 0px;">
  <div class="container" style="display: flex; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column; justify-content: center;">
      <h2 style="color: #000000; font-size: 28px; font-weight: bold;">CD-1 Report Form</h2>
    </div>
  </div>
  <div class="container" style="display: flex; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column; justify-content: center;">
      <div role="tablist" aria-multiselectable="true" class="panel-group">
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Patient Information
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingOne" class="panel-collapse collapse in">
            <div class="panel-body">{% entityform name: 'Patient Information' %}</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">
                Reporter
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingTwo" class="panel-collapse collapse">
            <div class="panel-body">{% entityform name: 'Reporter' %}</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                Risk/Background Information
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse">
            <div class="panel-body">{% entityform name: 'Risk/Background Information' %}</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                Symptoms
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse">
            <div class="panel-body">{% entityform name: 'Symptoms' %} 
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                Diagnostics
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse">
            <div class="panel-body">{% entityform name: 'Diagnostics' %}             
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div role="tab" class="panel-heading">
            <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                Treatment
              </a></h4>
          </div>
          <div role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse">
            <div class="panel-body">{% entityform name: 'Treatment' %}              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[OliverRodrigues]

how are you adding the HTML? is it via Portal Studio? or via D365/CDS ?

if you are making via Portal Studio, please try changing the records in the D365/CDS environment 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[Jim01]

@OliverRodrigues 

Thank you for responding.  I am making the changes in the source code editor of the PowerApps Portal app.  I am not changing any records, I'm trying to edit the UI by adding a Bootstrap Accordion Collapsible Group into a section (as seen here: https://getbootstrap.com/docs/3.3/javascript/#collapse).

[OliverRodrigues · Accepted solution]

Yes, I just tried myself here and it seem to have worked on the first go, but if go and try to edit the code again, it remove the IDs

seems to me it's bug on the Portal Studio, you can open a support ticket so Microsoft can take a look

as an alternative, you can add your code in the CDS

go to make.powerapps.com --> navigate to apps --> click Portal Management

you will be looking no at the model-driven app, on the left menu, find Web Pages

you will be presented with a list of records, locate your web page and open the record

once opening the record, there is a subgrid for Localized Content this contains another Web Page record, basically every Web Page in your system contains two records (1 representing the structure, we call it root web page, and another record for each language your Portals is enabled, we call it localized or content web page, that's where you add content/javascript etc)

in your localized web page there is a field called Copy (HTML), select HTML and add your code in there, this way it should keep the element IDs

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[Jim01]

@OliverRodrigues 

I am right where you are at but the Content Page link is grayed out.  All I can select is Information. I assume this is a permissions issue somewhere?

[OliverRodrigues]

can you share a snapshot? 

you might be in the root web page, and the page keeps refreshing to the "Information" form instead of the content page

make sure to open the Web Page within the Subgrid "Localized Content"

[Jim01]

I see where I made my mistake.  I was able to edit the HTML from there and it is working now.

Thank you very much for your help!!