HTML in power apps item template

(3) Share

Report

Posted on by jsmith87

297

Hi all,

I'm following a video on Youtube, part of the video requires you write some code in Visual Studio Code which i've done. The preview looks exactly how it needs to be. However, when I put it in my Item template it doesn't want to work. Is there something i need to enable? or is the something i need to add to the string? any help would be great, this is driving me mad!

<div - Expected operator. We expect an operator such as +, *, or & at this point in the formula.
Style=” Name isn't valid. 'style' isn't recognized.
Initials

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (25)

Answers (2)

Suggested answer

Michael E. Gernaey 53,433 Super User 2025 Season 2 on at

Like (0)

Report

hi @jsmith87

For whatever reason, it does not see that as a valid Item property.

Can you verify what the name of the property is (not the Label, but the name and use the actual name).

Is this dataverse or sharepoint?

Was this reply helpful? Yes No
jsmith87 297 on at

Like (0)

Report

Hi it's a drag and drop component which I've named people

Was this reply helpful? Yes No
jsmith87 297 on at

Like (0)

Report

sorry, forgot your last question, it's dataverse

Was this reply helpful? Yes No
Suggested answer

AmínAA 1,228 Super User 2025 Season 2 on at

Like (0)

Report

Hi there @jsmith87!

Back from my errands... The video you're referring to is two years old, so the way to use the component might've changed... Still, I'd like to know what happens if you remove {{Initials}} from the code, as it seems to be the only problem. Removing it will allow us to see if there are further problems with your code, or if it is just the reference to the Initials column.

In case the problem disappears and everything works fine, except for the initials not showing, then your problem is contained within your way of calling Initials, or the column itself... Perhaps the name on your gallery is not exactly Initials?

Let me know what happens if you remove the call to Initials!

If you like my response, please give it a Thumbs Up. Should this reply solve your question, please mark your post as Solved. Otherwise, feel free to reply to my answer for further help.

Connect with me if you feel like it!

Was this reply helpful? Yes No
Michael E. Gernaey 53,433 Super User 2025 Season 2 on at

Like (1)

Report

Hi @jsmith87 and @AmínAA

Before you read any of the below... from an HTML Perspective I notice something else.

What is the bottom > for? Is there more html I am missing to see? its not closing anything its just there. Did you mean to close the divtag (which btw that divtag isn't closed until the bottom bottom) so that's why this > throws me off as I don't know what it's for

Ok bear with me.

It's odd in a sense. The HTML is intended to use the field that you were having an issue with adding (again) before.

For me, it's as if the Source is... messed up and its Cache of Schema does not have Initials in it. Also agree with @AmínAA as that's why I said it doesn't think its valid. Its either not really there, the schema is messed up from multi-use scenarios in the same code, or once we fix the html it works.

What can happen is, if you are modifying or using a schema in different places, differently it can make it is so the HTML won't work as it doesn't know what to actually add.

Thats's why I was wondering what exactly the Squiggles say as the error

it probably says it has no idea about Initials, which would make sense because your other error would have broken it and make this not work.

Agree simplest thing is just to put Initials in there by itself.. does it work, or take that out and does the rest work. I still think the schema is hosed as its not there for real

Was this reply helpful? Yes No
jsmith87 297 on at

Like (0)

Report

Hi both,

I have removed the initials and still have errors , regarding the open and closed < i'll be honest I'm a bit of a powerapps nube and was just following the youtube video, really appreciate both of your help. I've posted the code in here too rather than just screenshots

<div
style="
min-height: 32px;
width: 100%;
display:flex;
align-items: center;
">

<div
style="border-radius:50%;
min-width: 32px; min-height: 32px;
background-size: contain;
display:flex;
align-items: center;
justify-content: center;
font-size:11px;color:FFFFFF;
background-color:cornflowerblue;
">

{{Initials}}</div>
<div>{{FullName}}</div>
</div>

Was this reply helpful? Yes No
jsmith87 297 on at

Like (0)

Report

PS i'm only using this HTML in one place (a custom drag and drop control) no where else

Was this reply helpful? Yes No
Suggested answer

stampcoin 5,058 Super User 2025 Season 2 on at

Like (0)

Report

Hi,

please use "<div>....</div>" on the outermost, because this will be considered a string, and the style, you have to use style=""...."".

good luck.

Was this reply helpful? Yes No
Suggested answer

BCBuizer 22,505 Super User 2025 Season 2 on at

Like (0)

Report
Hi!

Can you please try replacing all double quotes with single quotes and then wrapping the whole thing in double quotes?

For instance this:

<p dir="rtl">Hello World

gets turned into this:

"<p dir='rtl'>Hello World"

Assuming an HTML text control is used somewhere, this should resolve the issue.

If not, can you please share more about the type of control and the property you are trying to set?

Was this reply helpful? Yes No
AmínAA 1,228 Super User 2025 Season 2 on at

Like (0)

Report

Hi there @Michael E. Gernaey & @jsmith87!

Yeah it's kind of odd... I should probably watch the whole video again, and try to better understand how it works, as I just gave it a glance to help out, but now I have pure curiosity hahaha! However for me it is 00:10 and I've got work to do tomorrow... I'll check in tomorrow to see if you've managed to figure this out, otherwise whenever I find myself some free time I'll tag in!

Good luck guys!

Was this reply helpful? Yes No