cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

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

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>

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Solution Sage
Solution Sage

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

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

webpage.PNG

 


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

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.

View solution in original post

6 REPLIES 6
Highlighted
Solution Sage
Solution Sage

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

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.

Highlighted
Helper I
Helper I

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

@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).

 

 

Highlighted
Solution Sage
Solution Sage

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

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

webpage.PNG

 


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

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.

View solution in original post

Highlighted
Helper I
Helper I

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

@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?

 

 

Highlighted
Solution Sage
Solution Sage

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

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"

Highlighted
Helper I
Helper I

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

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!!

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (9,518)