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; } } }

Embedding Mobile Dashboard in Experience Builder app, does not display mobile View

CatherineRD

I have created a dashboard that is displayed in an Embed widget in my Experience builder app. I need to be able to have all 3 device sizes (desktop, tablet, mobile). Previously , I would create a separate dashboard for each size. Now that there is the ability to create 2 views (desktop and mobile) within a dashboard, I thought I could use that mobile view to display in the app. However, Experience builder doesn't seem to recognize this mobile version exists and it does not display the mobile view (not in the Live View of Experience builder) .

Should this work or do I need to create a separate dashboard for each size (as I have done in the past)?

Find more posts tagged with

Accepted answers

CatherineRD

Update: I have discovered that the mobile view of a dashboard is recognized in the embedded widget once it has been installed on a phone. In Experience Builder (development environment), using the screen size button does not display the mobile view, nor does it display in screen emulation tools within the browser. It must be on the phone.

All comments

C837410204_CSUesri

@CatherineRD Thanks for creating this post, I'm facing the same challenge with mobile views for dashboards embedded within a Web Experience. Can you clarify what needs to be installed on the phone for this solution, or do you just mean viewing it on the phone (rather than using the buttons in the backend of Experience Builder)? I'm viewing it on my phone, but everything still appears squished even though I've checked and seem to have the widgets configured as I'd expect they'd need to be (mobile device set up configured in the Dashboard, then the Experience Builder Row and Embed widgets have width/height set to "Stretch").

CatherineRD

I thought maybe the dashboard would recognize that the screen size had changed and would display the mobile version. It doesn't seem to work this way, although I am only testing in the development mode.

I have not tried to build it within EB, the dashboards offer flexibility that I like and it's only display data with lots of pie charts. The best part though is that I can change/update a dashboard and it's reflected in the app right away, I don't have to push a whole new version of the EB app to our server.

abureaux

Derp. Ya, I get what you're saying now.

That would make sense as the dashboard isn't getting info on the browser window, just the container. So, it wouldn't know when to change formats.

Is there something unique in the dashboard that cannot be replicated within Experience Builder? My first instinct would be to create everything in EB. If that isn't an option, I think you are stuck doing it the way you were previously.

CatherineRD

The issue is the embedded dashboard - (contained in the embed widget). Experience Builder can't resize the dashboard, only the container. In the past, I create different views of the dashboard and embed them with in each of the 3 view sizes in Experience Builder(desktop, tablet, mobile). Now, the dashboard has the ability to create a mobile view, but when I embed it in the widget, the mobile view is not recognized by Experience Builder.

abureaux

Are you using these buttons in Experience Builder?

I've made several apps intended to work on desktop, tablet, and mobile. In each case, I just toggled between the three views and configured the experience as necessary.

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.