With Appsilon’s recent public launch of two new R packages – shiny.fluent and shiny.react, the accessibility of React libraries to the Shiny dev community is now easier than ever. shiny.react opens up the rich React ecosystem (e.g., frameworks, blueprints, and components for charts and maps) to R developers, creating the opportunity to improve development speed, app functionality, and design. The ability to port entire React UI libraries is now possible through shiny.react.
Shiny.fluent ports Fluent UI to R using shiny.react machinery, giving powerful, professional, and user-friendly interfaces to the Shiny community. In this tutorial, we will walk you through how to create a dashboard for a Fluent UI app to improve upon a simple sales analysis application. If you haven’t already, we recommend you start your shiny.fluent adventure here to familiarize yourself with using Fluent components – the tutorial below will build on what you learn there.
Shiny.react was created with ease-of-use in mind for R developers. Inputs are as close as possible to the Shiny API and the react package(s) documentation is provided inside the R documentation system. To begin use of shiny.fluent we will install the shiny.react and shiny.fluent packages.
To install the packages, run:
With shiny.react and shiny.fluent packages installed, let’s load the libraries needed for this example.
In this tutorial, we will walk through how to build a dashboard UI.
As a next step, let’s add a title and subtitle to our current app. We’ll create a helper function and call it makePage, so that it is easy to add more pages in the same fashion.
It’s time to create a place for our header, navigation sidebar, and footer. We’ll use CSS grid for that. It’s a modern, flexible and straightforward way to achieve such a layout.
We start by creating divs for each of the areas, with placeholder texts that we will later replace.
Now it’s time to tell the browser using CSS how to arrange these areas. To define how our areas should be laid out on the page, let’s put the following rules in www/style.css:
We can also use this opportunity to add some additional styling for the entire page, and add the following rules to the same file:
Now we only need to update our UI definition to load styles from www/style.css and use the new layout.
Moving forward, we may now begin adding a Header, Footer, and Sidebar to the empty areas of our dashboard.
Let’s replace the previous header definition with:
As you can see, we’re using CommandBar and CommandBarItem from shiny.fluent. We also need to add a bit of styling to our CSS file:
Nav is a very powerful component from Fluent UI. It has very rich configuration options, but we will use it to show just a couple of links:
Footer is relatively straightforward – we can put anything we want there. Here we use Text for typography (setting uniform font styling). We also use Stack to arrange elements horizontally and with bigger gaps.
Let’s see how this looks together.
The final step is to add pages and enable navigation between them.
Let’s make a home page, consisting of two cards with some welcome text.
If we replace analysis_page with home_page in our UI, we can see this page. However, there’s one problem: we don’t have a way to switch between pages! This is where so-called page routing comes into play.
To enable switching between pages we will use the shiny.router package. This way we will also have shareable URLs to individual pages.
The first step is to define the available routes:
One final step is to add this single line to our server function, which otherwise remains untouched from the Part 1 of the tutorial.
And there you go! We now have styled a shiny.fluent app into a solid dashboard layout. Here’s the final result:
The speed at which you can now add user-friendly and ubiquitous Microsoft product elements to your project is quite impressive. In a matter of minutes, we were able to create a functional, professional-looking Shiny dashboard with shiny.fluent. And if your users are already familiar with Microsoft products, adoption can be seamless.
There is more complexity over something like shiny.semantic. However, an intermediate level of knowledge of Shiny is sufficient to begin. Component examples are provided and more comprehensive documentation can be found in the official Fluent UI docs or by typing shiny.fluent:: (e.g., ‘?shiny.fluent::MyComponentName’).
Please feel free to post any comments regarding shiny.fluent on our feedback thread. We love to hear feedback from our users and are happy to help should you have questions. If you like the package and want to show your support, please consider dropping a star on the shiny.fluent package at our Github and browse our other shiny packages.
If you’re interested in contributing to groundbreaking projects and working with leading experts in Shiny, consider joining our team. Appsilon is a global, remote-first company meaning we have team members working across the globe (7+ countries!). We are looking for talented individuals to help us in achieving our core purpose:
Advance technology to preserve and improve human life #purpose
We are motivated by ethical goals and impactful projects (like our open source projects and #AI4Good). Appsilon actively promotes and seeks to be a welcoming and diverse workplace. See how we achieve this by creating an inclusive work environment.
Appsilon is hiring for remote roles! See our Careers page for all open positions, including a React Developer and R Shiny Developers. Join Appsilon and work on groundbreaking projects with the world’s most influential Fortune 500 companies.