Answered

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

(0) Share

Report

Posted on by Jim0211

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:

after I save it gets changed to:

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>

Categories:

Power Apps portals

I have the same question (0)

All responses (6)

Answers (1)

Jim0211 57 on at

Like (1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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"

Was this reply helpful? Yes No
Jim0211 57 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Verified answer

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (3)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
Jim0211 57 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No