Skip to contents

Edit the background panel of your shiny using `background.md`

background.Rmd

The background panel is triggered when background = TRUE argument is used in the exportStaticApp() function. If background is set to TRUE a ‘background’ panel is added and a default ‘background.md’ file is created. The content of this ‘background’ panel will be always a card generated with the cardFromMd() function using the content of ‘background.md’. In this vignette we are going to show different options how to populate the ‘background.md’ file.

General markdown behaviour

The markdown part is compiled using the function markdown::markdownToHTML(), so anything supported by this function can be included in the markdown part. Most commonly used markdown functionalities are:

  • # for titles
  • ## for subtitles
  • ### for third level titles, as so on…
  • ![](image.png) to add images. Remember that the root folder is ‘shiny/www/’
  • *...* for italic text.
  • **...** for bold text.
  • - for bullet points.

A simple example:

# Introduction

This shiny *contains information* on:

- A
- B
- C

## Images

The **ohdsi** logo:
![]('ohdsi_logo.svg'){width=100px}

Introduction

This shiny contains information on:

  • A
  • B
  • C

Images

The ohdsi logo:

Populate yaml part

You can add some metadata to your markdown using the yaml on the top. To do so you need to put the metadata between ---:

---
YAML CONTENT
---

BODY CONTENT

The yaml metadata can contain two types of information:

  • keywords to add elements to the card.
  • arguments of the bslib::card function.

Keywords

The following keywords can be used to edit the bslib::card() content:

keyword function
header bslib::card_header
footer bslib::card_footer

Function column states which is the function that is triggered. Let’s see how to add header and footer to our card:

---
header: "Card header"
footer: "Some extra information"
---
# Introduction

bla bla bla bla...
Card header

Introduction

bla bla bla bla…

Some extra information

bslib::card() arguments

We can control the arguments of the bslib::card() using the metadata included in the yaml file. To include metadata in your background.md file.

You can check the documentation of bslib::card(), the supported arguments are those that can be populated using values (not calls to other functions):

  • full_screen
  • height
  • max_height
  • min_height
  • fill
  • class
  • id

For example:

----
header: "My custom card"
id: "my_custom_id" # this can be later used in the css
class: "my_custom_class" # this can be later used in the css
height: 100px
----
# Introduction

This shiny *contains information* on:

- A
- B
- C
My custom card

Introduction

This shiny contains information on:

  • A
  • B
  • C

Let’s see the html so we can see that id and class are populated:

#> <div class="card bslib-card bslib-mb-spacing bslib-card-input html-fill-item html-fill-container my_custom_class" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5" id="my_custom_id" style="height:200px;">
#>   <div class="card-header">My custom card</div>
#>   <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;"><h1 id="introduction">Introduction</h1>
#> <p>This shiny <em>contains information</em> on:</p>
#> <ul>
#> <li>A</li>
#> <li>B</li>
#> <li>C</li>
#> </ul>
#> </div>
#>   <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>