Preparing our UI

In this example, I'll be using the page layout navbarPage and tabPanel. Let's set up our project. We will create a single file app, create the www and js director, and create a javascript file.

# in r
file.create("app.R")
dir.create("www")
dir.create("www/js")
file.create("www/js/index.js")

Now open up the app.R file. We will start creating the structure of our ui. We will use the tagList function to load our javascript file. We will also set the ui layout to navbarPage. Here's the basic structure for our app

# ui.R or app.R
ui <- tagList(
        # head
        tags$head(
                tags$script(src="js/index.js")
        ),

        # ui
        navbarPage(
                # do something here
        )
)

Let's take a look at tabPanel. As written on the shiny reference page for tabPanel, tabPanel has the following arguments.

# tabPanel function
tabPanel(title, ..., value=title, icon=NULL)

The argument title receives the name of the tab. By default, the argument value is assigned the value given to title. When the tab panel is rendered to html, it will write this out as data-value=title. Why is this important?

We can use this argument in a more useful way. Instead of the default action (writing the title), we can substitute a value that is unique to the page, such as an id. If we have ids, this will be more useful. Using a little bit of javascript, we can create a function that searches all tabs that has the id that we want, and then "moves" to that tab.

Let's take a look at example. Suppose we have a tab panel titled, My Home Page and give it the value home.

# tabPanel function
tabPanel(title="My home page", value="home")

In the js function (which we will write soon), we find all the panels in our app, read the values that are assign, find the panel that has the value home, and then move the home panel.

It's important to note that even though value receives the values from title by default, it is good practice to assign shorter names to value to avoid matching errors.

Back to the UI structure that we defined above, let's create a few tabs and give them unique values. In this example, I will use home, about, and contact.

ui <- tagList(

        # head
        tags$head(
                tags$script(src="js/index.js")
        ),

        # ui
        navbarPage(
                tabPanel("Home", value="home"),
                tabPanel("About", value="about"),
                tabPanel("Contact Me", value="contact")
        )
)   

Next, let's create the links using tags$a(), but this time we will use a custom data-* attribute. In this example, we will use data-value (You can use anyname you like, as long as it's consistent). The values that we will use will be the id, or value, of the page we want the link to route is to. For example, on the home page, we want a link to take us the about page. For now, let's just add a title to each link. Also, I will give each page a title.

ui <- tagList(

        # head
        tags$head(
                tags$script(src="js/index.js")
        ),

        # ui
        navbarPage(

                # home page
                tabPanel("Home", value="home",
                        tags$h1("Home"),
                        tags$a("Go to About page")
                ),

                # about page
                tabPanel("About", value="about",
                        tags$h1("About"),
                        tags$a("Go to Contact Me page")
                ),

                # contact me page
                tabPanel("Contact Me", value="contact",
                        tags$h1("Contact Me"),
                        tags$a("Go Home Page")
                )
        )
)   

That's just about it for the ui. There's one more thing we have to do, but we will come back to this example once we've written our javascript function.

const customHref = function(link){

        // find all links
        const links = document.getElementsByTagName("a");

        // since it returns an object, iterate over each entries
        Object.entries(links).forEach( (elem, i) => {

                // match data-value attribute with input var
                if(elem[1].getAttribute("data-value") === link){

                        // if match, click link
                        elem[1].click()
                }
        });
}

tags$a("Got to data page", onclick="customHref('data')")

ui <- tagList(

        # head
        tags$head(
                tags$script(src="js/index.js")
        ),

        # ui
        navbarPage(

                # home page
                tabPanel("Home", value="home",
                        tags$h1("Home"),
                        tags$a("Go to About page", onclick="customHref('about')")
                ),

                # about page
                tabPanel("About", value="about",
                        tags$h1("About"),
                        tags$a("Go to Contact Me page", onclick="customHref('contact')")
                ),

                # contact me page
                tabPanel("Contact Me", value="contact",
                        tags$h1("Contact Me"),
                        tags$a("Go Home Page", onclick="customHref('home')")
                )
        )
)   

server <- function(input, output){}

# Run in R/Rstudio
install.packages("shiny")
shiny::runGitHub(repo="shinyAppTutorials",username="davidruvolo51",subdir="Internal-Links-Basic-Ex")