Introducing {shiny.emptystate} - Simplifying Empty States in Shiny Dashboards
We are excited to announce the launch of <code><b>shiny.emptystate</b></code>, a new CRAN package within the <a href="https://rhinoverse.dev/#shiny-emptystate" target="_blank" rel="noopener">Rhinoverse ecosystem</a>. This package is designed to simplify the <b>handling of empty states within Shiny</b> dashboards. Empty states occur when there is <b>no data to display</b>, and shiny.emptystate offers a seamless solution by overlaying Shiny outputs with <b>informative empty state components</b>. <h2>Why Are Empty States Needed in Shiny Apps?</h2> Empty states play an important role within apps and dashboards, particularly when data needs to be uploaded or filters are applied. These states help improve the user experience by providing clear messages when data is absent, guiding users on what actions to take next. <b>Mishandling empty states can result in confusion</b> and frustration for users. With <code>shiny.emptystate</code>, the process of integrating empty states becomes streamlined, enhancing the overall user experience of your Shiny dashboards. <a href="https://connect.appsilon.com/shiny-emptystate-demo/" target="_blank" rel="noopener"><img class="aligncenter size-full wp-image-20535" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01acbec1e575073dc2f1f_shiny-emptystate-examples-in-a-shiny-app.webp" alt="shiny-emptystate examples in a shiny app" width="1894" height="747" /></a> <blockquote>Explore empty states in the <a href="https://connect.appsilon.com/shiny-emptystate-demo/" target="_blank" rel="noopener">shiny.emptystate demo</a> or see more examples of the Rhinoverse in action at the <a href="https://explore.appsilon.com/shiny-demo-gallery" target="_blank" rel="noopener">Shiny Demo Gallery</a>.</blockquote> <h2>The shiny.emptystate Package Overview</h2> The <code>shiny.emptystate</code> package offers <b>a straightforward way to implement empty state components into Shiny applications</b>. These components serve as informative overlays, delivering context-specific messages when data is unavailable. Whether it's displaying an empty shopping cart or guiding users through dataset filtering, this package offers a versatile and user-friendly solution. <h2>Short Tutorial: Getting Started with Empty States in Shiny</h2> To begin using <code>shiny.emptystate,</code> follow these four steps: <ol><li style="font-weight: 400;" aria-level="1"><b>Include HTML Dependencies:</b> Begin by including the <code>use_empty_state()</code> function in your UI definition. This sets up the necessary dependencies for using empty state components within your app.</li><li style="font-weight: 400;" aria-level="1"><b>Define the Empty State Content</b>: Next, define the content you want to display in the empty state using <code>empty_state_component</code>(). This could be a message, an icon, or any informative element that guides users. <code>shiny.emptystate</code> provides a default empty state if no component is passed.</li><li style="font-weight: 400;" aria-level="1"><b>Create an EmptyStateManager Object</b>: Create an object of EmptyStateManager R6 class and pass empty state content created in Step 2 and the element ID you want to cover with the empty state content.</li><li style="font-weight: 400;" aria-level="1"><b>Implement Custom Logic:</b> Use the <code>show()</code> and<code> hide()</code> methods of the EmptyStateManager instance to control when the empty state content should be displayed or hidden. You can customize this logic based on your specific requirements, such as checking the presence of data before showing the empty state.</li></ol> <h2>Working shiny.emptystate Example:</h2> <pre><code> library(shiny) library(shiny.emptystate) library(reactable) library(fontawesome) <br>ui <- fluidPage( includeCSS("Magic/css_appsilon_way.css"), use_empty_state(), reactableOutput("my_table", width = "60%"), tags$div( id = "toggle_emptystate_buttons", actionButton("show", "Show empty state!"), actionButton("hide", "Hide empty state!") ) ) <br>server <- function(input, output, session) { empty_state_content <- empty_state_component( content = bsicons::bs_icon("table", size = "10rem", fill = "#3838fa"), title = "Hide empty state to see table", subtitle = "This empty state uses a Bootstrap icon." ) empty_state_manager <- EmptyStateManager$new( id = "my_table", html_content = empty_state_content ) observeEvent(input$show, { empty_state_manager$show() }) observeEvent(input$hide, { empty_state_manager$hide() }) output$my_table <- reactable::renderReactable({ reactable(iris) }) } <br>shinyApp(ui, server) </code></pre> <h2>More Open-Source Tools Like shiny.emptystate</h2> Be sure to head over to the <a href="https://rhinoverse.dev/#rhino" target="_blank" rel="noopener">Rhinoverse</a> to explore more open source tools for your Shiny project. You can find more resources like tutorials and documentation on empty state in Shiny on the <a href="https://appsilon.github.io/shiny.emptystate/" target="_blank" rel="noopener">shiny.emptystate page</a>. <a href="https://rhinoverse.dev/#rhino" target="_blank" rel="noopener"><img class="aligncenter size-full wp-image-20539" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01acb3b68120d131a3579_shiny-emptystate-on-rhinoverse.webp" alt="shiny-emptystate on rhinoverse shiny open source tools" width="900" height="500" /></a> If you find value in these open source packages, be sure to give them a star on GitHub. That let's us know we're on the right path toward serving you and the fellow R Shiny community. And of course, if you have feedback or need assistance getting started, <a href="https://appsilon.com/#contact" target="_blank" rel="noopener">reach out</a>!
Contact us!
.png)
