Improved boxes

David Granjon

2024-09-03

Boxes on Steroids!

The box state

box() is without any doubt a central component of {bs4Dash}. Thanks to the AdminLTE API, {bs4Dash} is able to provide more interactivity to this component. For instance, you may:

To benefit from that feature, one must pass the id parameter and access it on the server side with input$<id>. Let’s consider an example:

We call the updateBox() function, specifying the action to accomplish:

Knowing the state of a box significantly opens new possibilities within the application, thereby increasing interactivity. If you want to know more about the underlying mechanisms, have a look at the box widget documentation.

Box components

With {bs4Dash}, you may embed labels, a sidebar and dropdown menus in the box header.

Box Tools. From left to right: boxLabel, boxDropdown, collapsible and closable buttons, boxSidebar trigger.

Box Tools. From left to right: boxLabel, boxDropdown, collapsible and closable buttons, boxSidebar trigger.

Box Labels

boxLabel() are passed in the box() label slot. They typically contain number or a short text.

Box Sidebar

boxSidebar() is invoked through the box() sidebar parameter. The sidebar has an id allowing to programmatically toggle it on the server side with updateBoxSidebar(). This component is generally used to contain input element that you do not want to show in the box, while the box body generally contains visualizations such as plots or tables. boxSidebar() is highly customizable as one may change the background color, the width and the icon trigger, the latter displayed on the very right side of the box header, as depicted in Figure @ref(fig:boxTools). Below is an example showing how to set up the sidebar and toggle it.

What is the interest of being able to toggle the sidebar on the server? Image you want to open the sidebar as soon as the user clicks on a specific action button.

Box Dropdown

boxDropdown() is a super powerful tool since all dropdown items may behave like action buttons. This feature allows to seamlessly add interactivity to the box component and gather features in one place. In the example below, clicking on the first item triggers a toast().

Other Boxes

{bs4Dash} provides more box components to be able to adapt to various situations. What if you wanted to create a box with comments, with social content?

userBox

userBox() is intended to highlight user profiles. It has many common parameters with box() and overall the same layout. The 2 major diffences between box() and userBox() are:

  • The ability to add a user image in the box header.
  • Optionally add a background image in the box header.
  • The color parameter is only applied to the box header.

Additionally, you may also select 2 types: centered image or left-aligned image.

The title argument expects a userDescription():

userDescription(
  title = "Nadia Carmichael",
  subtitle = "lead Developer",
  type = 2,
  image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
)

userBox() is also entirely updatable from the server side, as it is built on top the box() function:

socialBox

A socialBox() is dedicated to contain events, comments, anything related to people. The title parameter hosts userBlock():

userBlock(
  image = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
  title = "Social Box",
  subtitle = "example-01.05.2018"
)

Elements like attachmentBlock() and userMessages() are a good fit with this component. The ... slot may hosts multiple boxComment, consisting in user comments. Right now, there is no programmatic way (understand no update function is available) to handle them but a future release of {bs4Dash} will obviously fill this gap. The app below shows a combination of multiple elements in a socialBox():