nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add Images within text box in Experience Builder

DaveK

Hello!

I'm creating an ExB application and within it I have an About window that has some instructional text. I'd like to add images and icons to the text box similar to the About window in WAB. I can't seem to figure out how to do this within ExB. Is it possible to add images to text boxes?

Image of a WAB About window for reference:

Thanks.

Find more posts tagged with

Accepted answers

All comments

jrosacker

Since we're using Github to manage code and the changelog for the app, I ended up uploading my images there, then using the Github URL in the image ref cell within the table. Felt easier to manage updating images via Github than AGO, but also loads with a slight lag, which might be due to the image hosting, or might be inherent to using the widget like this - not sure!

RishV-B

It looks great! but so much work around for it. I hope ESRI will add either a new widget for that, or allow existing widget to combine text with images.

Christina_Appleby

Should I submit it for review or post it when I'm finished?

JeffreyThompson2

Yes. If you can please use this Create a Blog Post option. I will have to approve it before it will go live but that will be easiest on me.

If you can't do that, go over to the Questions board and make a post there.

Christina_Appleby

@JeffreyThompson2 Absolutely! I've never contributed to the Tips and Tricks Board before, so I do just create a post?

JeffreyThompson2

@KaraUtter2 @Christina_Appleby Would either of you be interested in writing up your procedure for the Tips and Tricks Board? I am always trying to get more authors involved and it would be good to get the perspective of someone who's done it.

Christina_Appleby

Isn't this such a clever solution?! The folks at work were super impressed I ended up loading the images to AGOL, made them public (like this), and then used the URL in the spreadsheet. Then yes, I uploaded the spreadsheet to AGOL and published it as a table.

jrosacker

This is super cool! Adding on to Chistina_Appleby's question from yesterday to see if you'd share a little more about how you did this? I'm assuming you hosted the images somewhere, embedded them in an excel sheet which was then published as a table to ArcGIS Online, and then pulled into the app? Definitely interested in how you exposed each image to the internet, and whether I'm on the right track with the rest of it.

Very slick implementation.

Christina_Appleby

I'm about to do what you did, but I have a question. Where did you store the images? In your content?

KaraUtter2

Hi everyone, my workaround for this was to pull in a list widget into my Widget Controller, change the name to "Map Tools" and the icon to something other than the list icon. I then created a spreadsheet that had a map tool title field, image url field, and the text field. I filled these out and then used dynamic text within the list to create the Map Tools panel for my map application. I think it worked pretty slick and looks nice.

BrittanyBurson

Such an unfortunately lack in functionality that we can't include images/screenshots such as when building a Help widget.

RyanBohan

Unfortunately, it is not possible at this time. Please consider adding a kudo to this idea. Combine Text with Images - Esri Community

JeffreyThompson2

You could use the layout widgets to arrange Image widgets between Text widgets. You'll get the best results avoiding in-line images and using the Fixed Panel/Row/Column widgets, but if you really want to do in-line images you could try the Grid widget.

AlpineTech

It looks like you want to be able to add some free form HTML in the display, like those widgets that have a rich text format view and and a code view. The text widget doesn't appear to do that. You could use the Simple custom widget that ESRI provides with the Developer's Edition and make your own using React etc. Another option is to make an external HTML page, and then use the Embed widget to display it.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.