Embedding Dashboards in Bold BI: A Guide to Mobile Responsiveness

In the era of digital transformation, data visualization has become a crucial part of business intelligence. Bold BI, a leading business intelligence tool, offers a feature to embed dashboards into applications, making it easier for users to access and analyze data. This article will guide you on how to ensure mobile responsiveness when embedding dashboards in Bold BI.

Understanding Mobile Responsiveness

Mobile responsiveness refers to the ability of a website or application to adjust its layout, and functionalities to fit different screen sizes. This feature is essential in today’s digital landscape, where users access applications from various devices, including smartphones, tablets, and desktop computers.

Understanding Mobile Layout in Bold BI

In Bold BI, the design of the mobile layout is optimized for various screen sizes. This is achieved by ensuring that the embed container width is equal to or less than 768px. This allows for a seamless viewing experience on different mobile devices.

The widgets designed in a dashboard are arranged in a stacked manner. This arrangement is maintained in both portrait and landscape orientations. This feature ensures that the dashboard remains user-friendly and easy to navigate, regardless of the orientation of the device.

Embedding Dashboards in Bold BI

Bold BI allows users to embed dashboards into their applications, providing a seamless user experience. The embedded dashboard retains all the interactive features of the original dashboard, including drill-down, filtering, and exporting data.

To embed a dashboard in Bold BI, follow these steps:

1. Open the dashboard you want to embed.
2. Click on the ‘Share’ button.
3. Select the ‘Embed’ option.
4. Copy the generated iframe code.
5. Paste the code into your application’s HTML.

Ensuring Mobile Responsiveness in iframe Embedding

To ensure that your embedded dashboard is mobile responsive, you need to set the width equal to or less than 768px and the height properties of the iframe to 100%. This will allow the dashboard to adjust its size according to the screen size of the device.

Here is an example of how to set the iframe properties:

<iframe src="your-dashboard-url" style="border: none; width: 768px; height: 100%;"></iframe>

Bold BI Dashboard Mobile App Samples

Bold BI also provides mobile app samples to help users understand how to embed analytics dashboards. These samples are available for different platforms, including Xamarin and Ionic.

• Embedding Analytics Dashboard with Xamarin
• Embedded Dashboard in an Ionic Application

Additional Resources

For more detailed information on the mobile layout and embedding dashboards, refer to the following documentation:

• Responsive Dashboard – Embedded BI | Bold BI Documentation

Conclusion

Embedding dashboards in Bold BI not only enhance data accessibility but also improves user experience by providing interactive data visualization. By ensuring mobile responsiveness, you can make sure that your users can access and interact with your dashboards from any device.

References

1. Responsive Dashboard – Embedded BI | Bold BI Documentation
2. Embedding Analytics Dashboard with Xamarin
3. Embedded Dashboard in an Ionic Application
4. Embedding a dashboard in Iframe

Please note: This article is intended as a general guide. For specific issues or queries, please refer to the official Bold BI documentation or contact Bold BI support.