Skip to contents

Edit the landing page of your shiny

background.Rmd

Introduction

The landing page (background) 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 backgroundCard() function using the content of ‘background.md’. In this vignette we are going to show different options how to populate the ‘background.md’ file.

library(OmopViewer)

# this functions will be copied in your shiny folder
source(system.file("functions.R", package = "OmopViewer"))

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>