f7TabLayout problem

[korterling]

Hi，DivadNojnarg

I'm learning f7TabLayout Example; I used renderUI to repackage the UI, the display result is very different from the original, there are 2 problems.
1, the table on the third page is only partially displayed and cannot be swiped down
2, the navbar appears at the top of the whole page;
Any solution? thank you！

My code is as follows:
library(shiny)
library(shinyMobile)
library(shinyWidgets)

shinyApp(
ui = f7Page(
title = "Tab layout",
f7TabLayout(
tags$head(
tags$script(
"$(function(){
$('#tapHold').on('taphold', function () {
app.dialog.alert('Tap hold fired!');
});
});
"
)
),
panels = tagList(
f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
f7Panel(title = "Right Panel", side = "right", theme = "light", "Blabla", effect = "cover")
),
navbar = f7Navbar(
title = "Tabs",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
uiOutput('ui1'))),
server = function(input, output) {

output$ui1 <- renderUI({
    f7Tabs(
      animated = T,
      # swipeable = TRUE,
      f7Tab(
        theme = "light",
        
        tabName = "Tab1",
        icon = f7Icon("envelope"),
        active = TRUE,
        f7Shadow(
          intensity = 10,
          hover = TRUE,
          f7Card(
            title = "Card header",
            f7Stepper(
              "obs1",
              "Number of observations",
              min = 0,
              max = 1000,
              value = 500,
              step = 100
            ),
            plotOutput("distPlot1"),
            footer = tagList(
              f7Button(inputId = "tapHold", label = "My button"),
              f7Badge("Badge", color = "green")
            )
          )
        )
      ),
      f7Tab(
        tabName = "Tab2",
        icon = f7Icon("today"),
        active = FALSE,
        f7Shadow(
          intensity = 10,
          hover = TRUE,
          f7Card(
            title = "Card header",
            f7Select(
              inputId = "obs2",
              label = "Distribution type:",
              choices = c(
                "Normal" = "norm",
                "Uniform" = "unif",
                "Log-normal" = "lnorm",
                "Exponential" = "exp"
              )
            ),
            plotOutput("distPlot2"),
            footer = tagList(
              f7Button(label = "My button", href = "https://www.google.com"),
              f7Badge("Badge", color = "orange")
            )
          )
        )
      ),
      f7Tab(
        tabName = "Tab3",
        icon = f7Icon("cloud_upload"),
        active = FALSE,
        f7Shadow(
          intensity = 10,
          hover = TRUE,
          f7Card(
            title = "Card header",
            f7SmartSelect(
              inputId = "variable",
              label = "Variables to show:",
              c("Cylinders" = "cyl",
                "Transmission" = "am",
                "Gears" = "gear"),
              multiple = TRUE,
              selected = "cyl"
            ),
            tableOutput("data"),
            footer = tagList(
              f7Button(label = "My button", href = "https://www.google.com"),
              f7Badge("Badge", color = "green")
            )
          )
        )
      )
    )
  
  
})
output$distPlot1 <- renderPlot({
  dist <- rnorm(input$obs1)
  hist(dist)
})

output$distPlot2 <- renderPlot({
  dist <- switch(
    input$obs2,
    norm = rnorm,
    unif = runif,
    lnorm = rlnorm,
    exp = rexp,
    rnorm
  )
  
  hist(dist(500))
})

output$data <- renderTable({
  mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)

}
)

[korterling]

@DivadNojnarg

[DivadNojnarg]

Hi,

The issue is coming from the renderUI where you generate the tabs. Is there a reason for this?
Taking the simple example from the documentation, which runs fine:

library(shiny)
 library(shinyMobile)
 library(shinyWidgets)

 shinyApp(
   ui = f7Page(
     title = "Tab layout",
     f7TabLayout(
       tags$head(
         tags$script(
           "$(function(){
               $('#tapHold').on('taphold', function () {
                 app.dialog.alert('Tap hold fired!');
               });
             });
             "
         )
       ),
       panels = tagList(
         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
       ),
       navbar = f7Navbar(
         title = "Tabs",
         hairline = FALSE,
         shadow = TRUE,
         leftPanel = TRUE,
         rightPanel = TRUE
       ),
       f7Tabs(
         animated = FALSE,
         swipeable = TRUE,
         f7Tab(
           tabName = "Tab1",
           icon = f7Icon("envelope"),
           active = TRUE,
           f7Shadow(
             intensity = 10,
             hover = TRUE,
             f7Card(
               title = "Card header",
               f7Stepper(
                 "obs1",
                 "Number of observations",
                 min = 0,
                 max = 1000,
                 value = 500,
                 step = 100
               ),
               plotOutput("distPlot1"),
               footer = tagList(
                 f7Button(inputId = "tapHold", label = "My button"),
                 f7Badge("Badge", color = "green")
               )
             )
           )
         ),
         f7Tab(
           tabName = "Tab2",
           icon = f7Icon("today"),
           active = FALSE,
           f7Shadow(
             intensity = 10,
             hover = TRUE,
             f7Card(
               title = "Card header",
               f7Select(
                 inputId = "obs2",
                 label = "Distribution type:",
                 choices = c(
                   "Normal" = "norm",
                   "Uniform" = "unif",
                   "Log-normal" = "lnorm",
                   "Exponential" = "exp"
                 )
               ),
               plotOutput("distPlot2"),
               footer = tagList(
                 f7Button(label = "My button", href = "https://www.google.com"),
                 f7Badge("Badge", color = "orange")
               )
             )
           )
         ),
         f7Tab(
           tabName = "Tab3",
           icon = f7Icon("cloud_upload"),
           active = FALSE,
           f7Shadow(
             intensity = 10,
             hover = TRUE,
             f7Card(
               title = "Card header",
               f7SmartSelect(
                 inputId = "variable",
                 label = "Variables to show:",
                 c("Cylinders" = "cyl",
                   "Transmission" = "am",
                   "Gears" = "gear"),
                 multiple = TRUE,
                 selected = "cyl"
               ),
               tableOutput("data"),
               footer = tagList(
                 f7Button(label = "My button", href = "https://www.google.com"),
                 f7Badge("Badge", color = "green")
               )
             )
           )
         )
       )
     )
   ),
   server = function(input, output) {
     output$distPlot1 <- renderPlot({
       dist <- rnorm(input$obs1)
       hist(dist)
     })

     output$distPlot2 <- renderPlot({
       dist <- switch(
         input$obs2,
         norm = rnorm,
         unif = runif,
         lnorm = rlnorm,
         exp = rexp,
         rnorm
       )

       hist(dist(500))
     })

     output$data <- renderTable({
       mtcars[, c("mpg", input$variable), drop = FALSE]
     }, rownames = TRUE)
   }
 )

If you had to dynamically add/remove tabs to be able to programmatically create them, which is possible, you would have to leverage some tabs related server functions like shinyMobile::insertF7Tab, shinyMobile::removeF7Tab:

library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Insert a tab Before the target",
     f7TabLayout(
       navbar = f7Navbar(
         title = "insertF7Tab",
         hairline = FALSE,
         shadow = TRUE,
         leftPanel = TRUE,
         rightPanel = TRUE
       ),
       f7Tabs(
         animated = TRUE,
         id = "tabs",
         f7Tab(
           tabName = "Tab1",
           icon = f7Icon("airplane"),
           active = TRUE,
           "Tab 1",
           f7Button(inputId = "add", label = "Add tabs")
         ),
         f7Tab(
           tabName = "Tab2",
           icon = f7Icon("today"),
           active = FALSE,
           f7Button(inputId="stay", label = "Stay"),
           "Tab 2"
         )
       )
     )
   ),
   server = function(input, output, session) {
     observeEvent(input$stay, {
       f7Toast("Please stay")
     })
     observeEvent(input$add, {
       insertF7Tab(
         id = "tabs",
         position = "after",
         target = "Tab1",
         tab = f7Tab (
           # Use multiple elements to test for accessor function
           f7Text(inputId = "my_text", label ="Enter something", placeholder = "What?"),
           f7Text(inputId = "my_other", label ="Else:", placeholder = "Else ?"),
           tabName = paste0("tabx_", input$go),
           "Test2",
           icon = f7Icon("app_badge")
         ),
         select = TRUE
       )
     })
   }
 )

[korterling]

Hi , DivadNojnarg
thank you very much, shinyMobile::insertF7Tab, shinyMobile::removeF7Tab is a good solution.

but, I must use renderUI, because The content of each tab is generate from the server,thank you very much!

If I must use renderUI, is there any suggestion?

[DivadNojnarg]

You don’t need renderUI because insertF7Tab can be used from the server, allowing you to create your tab from the server, for any tab.

[korterling]

great ,I will test insertF7Tab in my app,thank you very much!