topic Add Images within text box in Experience Builder in ArcGIS Experience Builder Questions

Add Images within text box in Experience Builder

DaveK — Mon, 16 Oct 2023 18:55:41 GMT

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.

Re: Add Images within text box in Experience Builder

AlpineTech — Mon, 16 Oct 2023 21:27:31 GMT

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.

Re: Add Images within text box in Experience Builder

JeffreyThompson2 — Tue, 17 Oct 2023 13:01:09 GMT

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.

Re: Add Images within text box in Experience Builder

RyanBohan — Mon, 08 Jan 2024 17:21:33 GMT

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

Re: Add Images within text box in Experience Builder

BrittanyBurson — Mon, 08 Jan 2024 17:24:02 GMT

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

Re: Add Images within text box in Experience Builder

KaraUtter2 — Tue, 13 Feb 2024 20:47:25 GMT

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.

Re: Add Images within text box in Experience Builder

Christina_Appleby — Wed, 17 Apr 2024 14:14:55 GMT

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

Re: Add Images within text box in Experience Builder

jrosacker — Thu, 18 Apr 2024 21:31:06 GMT

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.

Re: Add Images within text box in Experience Builder

Christina_Appleby — Fri, 19 Apr 2024 14:18:05 GMT

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.

Re: Add Images within text box in Experience Builder

JeffreyThompson2 — Fri, 19 Apr 2024 14:33:05 GMT

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

Re: Add Images within text box in Experience Builder

Christina_Appleby — Fri, 19 Apr 2024 14:39:11 GMT

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

Re: Add Images within text box in Experience Builder

JeffreyThompson2 — Fri, 19 Apr 2024 14:48:11 GMT

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.

Re: Add Images within text box in Experience Builder

Christina_Appleby — Fri, 19 Apr 2024 15:00:38 GMT

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

Re: Add Images within text box in Experience Builder

JeffreyThompson2 — Fri, 19 Apr 2024 15:10:06 GMT

Just hit Post. I think they wind up doing the same thing either way. I will be able to clean it up afterwards if there is any issue.

Re: Add Images within text box in Experience Builder

RishV-B — Mon, 20 May 2024 20:57:25 GMT

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.

Re: Add Images within text box in Experience Builder

jrosacker — Wed, 17 Jul 2024 16:01:31 GMT

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!