shiny.semantic 0.4.0 Update Brings CSS Grid UI Functionality to Shiny Apps

[This article was first published on r – Appsilon Data Science | End­ to­ End Data Science Solutions, 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.

shiny semantic by appsilon

tl;dr

shiny.semantic is an R package created by Appsilon that brings the Fomantic UI library to Shiny apps. With shiny.semantic, you can rapidly create great looking Shiny apps with non-standard UI components. We have just released version 0.4.0, which includes standardized syntax, a useful grid functionality for easily positioning UI elements, and multiple quality of life improvements. With grid, you can create a single layout that works on mobile, tablet, and computer. shiny.semantic is available on CRAN. To learn more about Appsilon’s open source packages, visit our new shiny.tools landing page. 

Appsilon's shiny.tools landing page for our open source packages.

Appsilon’s shiny.tools landing page for our open source packages, including semantic.dashboard, shiny.info, shiny.router, and shiny.i18n. To learn how shiny.worker offloads heavy calculations and speeds up Shiny apps, go here

shiny.semantic: Version 0.4.0 Update

The shiny.semantic package was released in 2016 and was quickly adopted by the R community as an alternative to Bootstrap UI. At the beginning of 2020, Appsilon decided to migrate the engine of shiny.semantic (all CSS and JS libraries) to the more actively supported FomanticUI project, but we left the name of the package unchanged for legacy purposes.

Today, we are happy to share with you that shiny.semantic has reached version 0.4.0. In the latest edition, we have introduced a couple of breaking changes. First of all, we have standardized the syntax. You can find more information about the new syntax in our styleguide. Briefly, now we use camelCase for all the functions that have equivalence in the regular Shiny syntax, but we stick to snake_case for custom shiny.semantic functions. For example, you can still call the stock Shiny actionButton in a similar way as in standard Shiny, but as an alternative you may also use action_button, which has even more customization options specific to FomanticUI.

Grid Functionality

Another big change is the introduction of a powerful functionality that we are calling “grid.” With grid, you can easily position the elements of your UI on the page. You start by defining the template of your grid. Let’s call it here my_layout. (You may also style particular grid container elements using parameter areas_style straight from R.)

my_layout <- grid_template(default = list(
  areas = rbind(
c("top_left", "top_right"),
c("bottom", "bottom")
  )
))

And in the Shiny UI pass the template together with the definition of elements of UI in a specific place. For example:

ui <- semanticPage(
  grid(my_layout,
    top_left = segment(h1("Top left")),
    top_right = segment(h1("Top right")),
    bottom = segment(p("Lorem ipsum..."))
  )
)

If you want to test how your grid cells look without running the full app, you may use this auxiliary function:

display_grid(my_layout)

display_grid(my_layout) in shiny.semantic

But you don’t need to build your own layouts from scratch! We’ve implemented (with grid) some of the most popular layouts that you may know from Shiny: horizontal layout, vertical layout, and sidebar layout that you can see below:

shiny.semantic layouts

The shiny.semantic documentation is now rendered with an extremely useful pkgdown package: http://appsilon.github.io/shiny.semantic. With very little work, the documentation got a nice fresh look with a number of examples for almost every function. I could tell you about all of the new components that we introduced: counter button, toasts, progress bar, etc. – but it’s better that you visit our new documentation website to explore them all on your own. Furthermore, we’ve added a few short tutorials that will help you to dive into the details of shiny.semantic development. If you are interested in all the details of the latest changes, please refer to our changelog.

You can see yourself the effects of shiny.semantic transforming the look of a Shiny dashboard from our work on the Utah Division of Water Quality app: before and after

Utah Division of Water Quality Before and After with shiny.semantic

Utah Division of Water Quality Shiny dashboard before and after a shiny.semantic overhaul

You may get or update the new shiny.semantic from CRAN. If you encounter any problems, please report bugs on our GitHub or contact us directly: [email protected]. Remember that shiny.semantic is fully open-source, so we always welcome new contributors. Feel free to reach out and learn how you can contribute to the development of shiny.semantic.

If you like the new version of the package, please leave us a star on GitHub: https://github.com/Appsilon/shiny.semantic. We always love receiving feedback on our work. Happy coding!

Learn More

Article shiny.semantic 0.4.0 Update Brings CSS Grid UI Functionality to Shiny Apps comes from Appsilon Data Science | End­ to­ End Data Science Solutions.

To leave a comment for the author, please follow the link and comment on their blog: r – Appsilon Data Science | End­ to­ End Data Science Solutions.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)