Professional Shiny App UI and Layouts with imola and shiny.fluent | R-bloggers

Professional Shiny App UI and Layouts with imola and shiny.fluent
Posted on September 6, 2022 by Johan Rosa in R bloggers | 0 Comments
[This article was first published on Tag: r - Appsilon | Enterprise R Shiny Dashboards , and kindly contributed to R-bloggers ]. (You can report issue about the content on this page here )
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
Share Tweet
Shiny as a web framework is known for its combination of power, simplicity, and flexibility. It’s a convenient tool for app development at all levels, from proof of concept to production-grade Shiny apps . With additional packages like {imola} and {shiny.fluent}, anyone can create professional Shiny app UIs with custom layout options.
These characteristics make Shiny an easy-to-pick-up technology, helping teams and R users – without web development experience – to create applications and automate tasks fast. But soon we realize that this simplicity comes with a cost: boilerplate applications that look basic and monotonous.
No time to waste? Download a free Shiny template from Appsilon .
To overcome this problem we can start adding custom styles and layouts to our apps with CSS. Alternatively, we can incorporate packages developed by the R community to introduce new styles to Shiny apps without adding too much complexity to the process. Among the many packages are: {shiny.dashborard}, {shinythemes}, {bslib}, {shiny.semantic}, {shiny.fluent}, and {imola}. There is a vibrant and healthy ecosystem of R packages out there to satisfy your needs.
On the fence about Shiny for your business? See why you should be using R Shiny for enterprise application development .
In this post, we’re going to cover {shiny.fluent} and {imola}. And we’ll show you how to create Shiny apps that will impress your team.
Summary
shiny.fluent for a Professional Shiny UI
{shiny.fluent} is a package developed by Appsilon to integrate Microsoft’s open-source Fluent UI components into Shiny applications. With this package, Shiny users are able to build applications with the look and feel of Microsoft’s user-friendly and elegant UI.
Using {shiny.fluent} in your project is quite simple. The basic input arguments are similar to those in base Shiny and all components are well documented. In the shiny.fluent demonstration , you can explore a preview of almost every available widget – like a catalog or peoplepicker. You can explore and select the ones that better suit your needs, grab the code presented, and use it in your app.
imola for CSS grid and flexbox for Shiny Apps
{imola} is an R package developed by Pedro Silva , and is a great solution to incorporate CSS grid and flexbox into Shiny applications. And it does so in a straightforward way. This package comes with built-in templates for the most common layouts in app development, and with flexibility for users to incorporate custom templates.
The goal of the {imola} package is to turn any container into a grid or flexbox container with minimal refactoring of the original code; It’s recommended for applications that need mobile support.
To get familiar with {imola} there are a few recommended resources:
It’s a good idea to go through them, especially the vignette and the minimal reproducible examples. There you’ll discover how to change the default configuration of the templates and how to add styles.
Shiny App Example with shiny.fluent and imola: Quakes Explorer App
To showcase the integration between {shiny.fluent} and {imola}, let’s create an application to explore recent earthquakes. The data comes from the  U.S. Geological Survey (USGS) and covers all earthquakes registered from April 28 to May 28, 2022.
The dataset contains details for each earthquake like longitude, latitude, magnitude, depth, registration date, source, and estimates error for each metric. You can use this data in complex applications like the USGS interactive map  which served as inspiration for this post.
In our case, we can try {imola}’s “grail-left-sidebar” grid template for this app. This layout has 4 areas in a 3-row by 2-column grid. The areas are header, sidebar, content, and footer.
For this example, let’s start with placeholders for each area. This allows us to see the grid structure beforehand, later we can replace each one, step by step.
library(shiny) library(shiny.fluent) library(imola) library(stringr) library(dplyr) library(readr) library(leaflet) library(glue) library(purrr) quakes_data