Responsive Dashboard

[Desiderato Merriwether]

Wehave publically embedded a couple of dashboards, and at certain breakpoints, the individual cards do not render properly. Cards are often cut off (half is showing) or a large amount of whitespace above or below the contents of the cards are shown.

To my knowledge you can't dynamically change the iframe size based on the amount of data so if you have too little data in a table you'll get the extra whitespace and too much data in your table will result in it getting gut off.

The issue is not as much with the iframe itself, but how the individual cards are being rendered at certain breakpoints. The content within the cards is being cut off or large amounts of white space added to the top and bottom of each card. The same issues are happening in the mobile preview (accessible when editing a data story) as in a live dashboard embed scenario, which tells me this is a core issue with Domo's responsive card rendering logic.

But I was wondering if there was a way to format the dashboard so that it responds well to multiple screen resolutions? For instance, chart axes display every other label when resolution is lower. Is responsive design still not support by the Dashboard?

Unfortunately, ArcGIS Dashboards does not support responsive design. Sorry. We are working on improving the dashboard mobile UX as a longer term dev effort. If you have specific requirements/feedback - please share your comments.

We started to use the responsive dashboard, but I do not see the option to auto-refresh the dashboard. I found the documentation page to make real-time single score reports, but I did not find the page to make other reports real-time or refresh them periodically. If there is no such option, it would really be a step back from the previous dashboarding engine.

I'm using Publish to Web feature to embed my dashboard on a web page. It works fine on desktops, but when accessing on mobile device, it shows only half of the dashboard (like picture below).

I've already changed the iframe resolution to fit the role dashboard on screen (So I do not have to keep scrolling to see its contents). Its looks like the desktop version, but resized to fit the mobile screen (and some kind of margin on top and bottom and the dashboard on the middle).

Enabling responsive visualization:

The responsive setting is per visual. To make a visualization responsive, select it in Power BI Desktop. In the formatting pane, under General, set Responsive to On.

Dashboards can include layouts for different types of devices that span a wide range of screen sizes. When you publish these layouts to Tableau Server or Tableau Cloud, people viewing your dashboard experience a design optimized for their phone, tablet, or desktop. As the author, you only have to create a single dashboard and deliver a single URL.

Think of the Default dashboard as the parent, and the device layouts (desktop, tablet, and phone) as its children.Any view, filter, action, legend or parameter that you want to add to a device layout must first exist in the Default dashboard.

If you instead click the closed lock icon or choose Edit Layout from the menu, the Phone layout becomes fully independent, so you'll need to manually add and arrange items to reflect changes to the Default dashboard.

Unlike Phone layouts, you need to manually add Desktop and Tablet layouts to a dashboard. Desktop and Tablet layouts are always fully independent from the Default dashboard, so each device layout can contain a unique arrangement of objects.

Select Tableau Mobile app to see how the dashboard will look with the app instead of the browser. This option is available for iOS or Android devices and shrinks the dashboard slightly, leaving space for the app controls.

Creating a layout for each device type gives you the most control over your users' experience as they view your dashboard from different devices. After you publish a dashboard with all three layouts, users won't see the default dashboard layout; instead, they'll always see the appropriate device-specific layout.

Default: The height and width of the device layout mimics whatever the default dashboard is using. For example, if you're creating a tablet layout and the default dashboard is set to a fixed size of Desktop Browser (1000 x 800), setting Size to Default for the tablet layout will make it use 1000 x 800 as well.

Fit all: All items are automatically resized to fit the device frame size. The device frame size is determined by the Device type, Model, and orientation (portrait or landscape) settings.

Fit width (recommended for phones): Items are automatically resized to fit the width of the device frame, but the height is fixed. This is a great option for phone layouts and vertical scrolling.

If you've chosen to edit a phone layout yourself, you can quickly optimize the placement of filters, remove white space, and more. On the Dashboard tab, click the pop-up menu to the right of Phone, and select Optimize Layout.

Be aware that this command only rearranges items currently in the phone layout. If you want to continuously update the phone layout to reflect all changes to the default dashboard, select Auto-Generate Layout.

To let phone users quickly contact key people about dashboard content, add URL actions to objects that automatically trigger SMS messages and telephone calls. Use the link format sms:phone-number or tel:phone-number. Be sure to include country and area codes if necessary.

White space is another visual element to consider. While screen real estate on a phone is scarce and you want to make the most of it, you may also want to provide additional safe places for your users to tap or initiate scrolling, so they don't select filters and other items unintentionally.

When this check box is selected for device-specific dashboards, the tabs' sizing requirements interfere with the server's ability to correctly detect the size of the web browser and load the correct layout.

The dashboard layout a device displays is based on the smallest dimension (height or width) of the iframe in which the Tableau view appears. Sometimes Desktop, Tablet, or Phone layouts may appear on other types of devices. For example, a Tablet layout may appear on a desktop computer if the display or browser window is small.

If Tableau Cloud and Tableau Server users find a Phone or Tablet layout too limiting, they can use the display settings button in the toolbar to view the Desktop layout. This button is a toggle that allows you to switch between Desktop and Mobile layouts. The button placement varies depending on the device you are viewing the dashboard on.

There are two types of Dashboards used across the ServiceNow platform, responsive and non-responsive. In addition to Dashboards, the system also includes Homepage's which may appear similar to a dashboard and share some of the characteristics of a dashboard. The steps to perform certain actions on a dashboard or Homepage are often somewhat different dependent on whether the Dashboard is a responsive Dashboard or a non-responsive Dashboard or the object is a Homepage. This brief article will describe the indicators to determine if a specific dashboard is a responsive dashboard, non-responsive dashboard or a homepage.

Add Dashboard (showing as a plus icon at the upper left corner of the dashboard), Homepage Settings (shown as a cog icon), a Refresh now icon (circular arrow in the upper right corner of the Homepage), an Add Content button and a Change Layout button.

Note that the current setting for the system property titled glide.cms.enable.responsive_grid_layout will control whether most dashboards will appear as responsive or non-responsive. A setting of true indicates that dashboards will be displayed in a responsive stance, if available while a setting of false indicates that the dashboards will always be displayed in a non-responsive format.

I'm trying to change the iframe code for my smartsheet dashboard embedded into sharepoint with a responsive height and width (100%). The code doesn't seem to be picking up the % sign, and instead is making it 100 px.

Please submit your feature request to the Product team by creating an Idea Post in the Smartsheet Product Feedback and Ideas topic here in the Community. This will allow other users to vote on your enhancement idea!

I opened a support ticket, but I can't close this pop-up no matter what I click or what browser I use and I'm wondering if anyone has any insight. I'm LOCKED OUT of my work because of some stupid UI refresh alert. ?

Wondering if there's a way to have dashboards adjust the layout responsively for mobile? Right now by default, on mobile it shows the entire dashboard and it's so tiny. Most other solutions the boxes stack on top of each other when the screen size reaches a certain width.

Does anyone know if there's a way to do that in Smartsheet? The sheet Forms and rest of the website are all responsive, mobile-optimized by default. So it's a bit annoying that dashboards aren't by default.

With the Smartsheet Mobile App, you can review the dashboards that you've already set up so that you can see key metrics and information on the go. Tap the layout icon at the bottom right corner to switch between Mobile and Desktop Layout.

I am using Chronograf to view the data of my wetterstation.

Some of that data should be shown on a small Android Phone, but Chronograf Dashboard is not very good in adapting to different screen sizes nor to mobile phone screens.

I used Grafana before and they did a great job with their responsive dashboard layout, but for other reasons I cannot use Grafana any more.

I also found this post (Custome plugin / dashboard for mobile - #3 by alvianno) but I do not want to run another service if I can avoid it.

3a8082e126