i am creating an user registration application which accepts the user inputs like:username,Fullname,Email,contact number.
After clicking create button i am able to display modal message stating user registered . Onclick of close button i want my tabpanel created to reset all the textinput to its original data.
1)Created one tabpanel with title.
2)Created all the input and its types.
3)Created Modal successfully.
4)Even tried with shinyjs::reset() funtion as well.
Code for Ui.R:
tabPanel(title="User Management",id ="user",shinyjs::useShinyjs(),
fluidRow(
column(5,textInput("uname","User Name")),
column(5,textInput("fname","Full Name"))),
fluidRow(
column(5,textInput("email","Email Id")),
column(5,numericInput("contactnum","Contactnumber",value=NULL))),
fluidRow(
column(5,selectInput("country", label = "Country:",
choices = list("India","USA"),
selected = 1)),
column(5,selectInput("state", label = "State:",
choices =list("Karnataka","Kerala"),
selected = 1))),
fluidRow(column(5,numericInput("zip","ZIP Code",value=NULL)),
fluidRow(
column(5,passwordInput("pwd1","Password")),
column(5,passwordInput("pwd2","Confirm Password"))),
fluidRow(
column(12,actionButton("userCreate", "Create User"),
style="color: #fff;
background-color: #337ab7; border-color: #2e6da4"))),
br(),
)
)
Server.R:
observeEvent(input$userCreate,{
if(postuser() == 200)
{
showModal(modalDialog(
title = "Success",
"User is successfully added!"
footer = tagList(
actionButton("Close", "Close")
)
)))
}
})
observeEvent(input$Close,{
reset("user")
}
)
Update and Tries:
Even tried with shinyjs::reset("user") funtion and shinyjs::js$reset("user")function as well.
Please help me out with this . And i need logical code for list of all the counties and states.
Thanks in Advance
Try
observeEvent(input$Close,{
#reset("user")
shinyjs::reset("uname")
shinyjs::reset("fname")
#the remaining fields id's you would like to reset
}
The problem was giving the wrong div id's to reset, hence nothing happened after click close. To understand what I'm talking about have a look at
print(tabPanel(title="User Management",id ="user",shinyjs::useShinyjs(),
fluidRow(
column(5,textInput("uname","User Name")),
column(5,textInput("fname","Full Name")))))
Related
In the Shiny App below, I am facing a very strange behavior, where selectInput box slides downwards when I type something in this box. Also, the text inside selectInput box moves towards the right while I type in this box. I have spent a lot of time to find out the reason for this problem but could not figure it out. Can someone point out the mistake I am doing causing this strange behavior?
library(shiny)
library(shinydashboard)
library(highcharter)
siderbar <- dashboardSidebar(
sidebarMenu(
selectizeInput(inputId = "select_by", label = "Select by:", choices = NULL, multiple = FALSE, options = NULL)
)
)
body <- dashboardBody(
fluidRow(
tabBox(
side = "right",
selected = "Tab1",
tabPanel("Tab1", "Tab content 1", highchartOutput("tabset1Selected"))
)
),
)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "tabBoxes"),
siderbar,
body
),
server = function(input, output, session) {
selectedVal <- reactiveValues()
updateSelectizeInput(session, "select_by", choices = c(as.character(1:10000)), selected = 2, server = TRUE)
output$tabset1Selected <- renderHighchart({
selectedVal <- input$select_by
print(highcharts_demo())
})
}
)
We were on the right track. It has something to do with selectize.js updating the items from the server. You can verify that by setting the loadThrottle option to 5000. This option determines how long the widget waits "before requesting options from the server" (see the manual). Now you have to wait exactly 5 seconds and then the select widget flickers.
The issue seems to be caused by a CSS conflict. selectize.js adds a CSS class to the widget. If you remove that feature, the flicker goes away.
selectizeInput(inputId = "select_by", label = "Select by:",
choices = NULL, multiple = FALSE,
options = list(loadThrottle=200, loadingClass=""))
loadingClass sets a specific CSS class (default: 'loading') while loading data from the server. Purpose: to change how the widget looks and communicate to users that an update is in progress.
loadThrottle does not need to be set. It's default is 300. You can set it to any value that suits your needs.
Details
highcharter defines it's own CSS class names loading with these specs:
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
That is the reason for the CSS conflict. The widget gets a top margin and it's content moved to the center, because the browser does not distinguish the source of the class. It only sees some CSS that fits and uses it. This image shows where you need to look:
I want to control the appearance of a modalDialog depending on the input of a selectInput, what is the best way to do that? I've tried the following code, but conditionalpanel doesn't work within modalDialog. (showing part of the code)
ui<-fluidPage(
selectInput("v1",c("Active_ingredient","Brand_Name"),
actionButton("tabBut", "Select Drug and Event...", style='primary')
)
server<-function(input, output, session) {
dataModal<-function(failed=FALSE){
modalDialog(
conditionalPanel(
condition="input.v1==Active_ingredient",
selectizeInput_p("t1", "Active Ingredient",
choices=c("start typing to search..."="",ing_choices),
HTML( tt('drugname1') ), tt('drugname2'),
placement='bottom')
),
conditionalPanel(
condition="input.v1==Brand_Name",
selectizeInput_p("t1_1", "Name of Drug",
choices=c("start typing to search..."="",drug_choices),
HTML( tt('drugname1') ), tt('drugname2'),
placement='bottom')
),
selectizeInput_p("t2", "Adverse Events",choices= c("Start typing to search"=""),
HTML( tt('eventname1') ), tt('eventname2'),
placement='left'),
numericInput_p('maxcp', "Maximum Number of Change Points", 3, 1, step=1,
HTML( tt('cplimit1') ), tt('cplimit2'),
placement='left'),
footer = tagList(
modalButton("Cancel"),
actionButton("update", "OK")
)
)
}
observeEvent(input$tabBut, {
showModal(dataModal())
})
}
You might try moving the modal dialog to ui.R, using bsModal.See here for an example:
Create a popup dialog box interactive
Hope this helps! Florian
I have a button in my ui.R that I want to be shown only when "Summary" tab is selected, so I thought of this code
fluidRow(
column(4,
column(12,id="sub",
actionButton("submit", "SUBMIT", width = "100%"))),
column(8,
bsCollapse(id = "collapse7", open = "Results",
bsCollapsePanel("Results",
tabsetPanel(
tabPanel("Summary",
tags$script(HTML("document.getElementById('sub').style.visibility = 'visible';")))
tabPanel("Plot",
tags$script(HTML("document.getElementById('sub').style.visibility = 'hidden';"))))
))))
The problem is, the button is hidden even though in my first tab it should be visible and also when i go to Plots and back to Summary, the button stays hidden.
After looking at: How to use tabPanel as input in R Shiny?
I decided to play with observeEvent and the input$tabset option. The result is 100% working and it's really simple. Here's the code:
observeEvent(input$choices, {
choice = input$choices
if(choice == "Summary")
{
runjs(
"document.getElementById('submit').style.visibility = 'visible';"
)
}
else
{
runjs(
"document.getElementById('submit').style.visibility = 'hidden';"
)
}
})
Also, I found out why my previous code wasn't working, it was due to the fact that when the UI was initialized, the button element kept the last style modification (the hidden one) and it didn't change depending on the tab I have selected, since its not reactive.
I have a problem with shiny tabs. I want to create a navigation page with two tabs. Right to them, I would like to insert some user's login details. There is no option "text" or other to insert a text in the navbarPage. But I created an additionnal tab instead:
library(shiny)
runApp(list(
ui = navbarPage(
title="My App",
tabPanel("tab1 title"),
tabPanel("tab2 title"),
tabPanel("User: Madzia")),
server = function(input, output) { }
))
It is OK like this, but I do not want the third tab to be "selectible": I want it to be disabled, so that we cannot click on it - the same as on "My App" text. Do you have any idea about how to handle this problem?
Thank you! Best, Madzia
You can achieve disabling a tab with a tiny bit of javascript. I have an example of how to hide a tab (not disable) in recent blog post, you can see the code for that here. I modified that code a bit for disabling instead.
This code is hacky because it was done in 2 minutes but will work for a basic use case
library(shiny)
library(shinyjs)
jscode <- '
shinyjs.init = function() {
$(".nav").on("click", ".disabled", function (e) {
e.preventDefault();
return false;
});
}
'
css <- '
.disabled {
background: #eee !important;
cursor: default !important;
color: black !important;
}
'
shinyApp(
ui = fluidPage(
useShinyjs(),
extendShinyjs(text = jscode, functions = "init"),
tags$style(css),
checkboxInput("foo", "Disable tab2", FALSE),
tabsetPanel(
id = "navbar",
tabPanel(title = "tab1",
value = "tab1",
h1("Tab 1")
),
tabPanel(title = "tab2",
value = "tab2",
h1("Tab 2")
),
tabPanel(title = "tab3",
value = "tab3",
h1("Tab 3")
)
)
),
server = function(input, output) {
observe({
toggleClass(condition = input$foo,
class = "disabled",
selector = "#navbar li a[data-value=tab2]")
})
}
)
Edit I didn't fully read the question when I posted my answer, I just saw that you wanted a way to disable a tab and that was my answer. Your specific usecase (creating a tab only to show the name of a user) is a bit strange, but I suppose this will still work...
I would like to keep my previous answer in existence because it may be useful for someone in the future who wants to know how to disable a tab.
But for this specific problem, disabling the tab is not the correct approach. It makes more sense to simply add text to the tab (as Valter pointed out in a comment). If you look at the documentation for bootstrap, it says you can add text into the navbar by adding an html element with class navbar-text. I experimented with the HTML a little bit to figure out exactly where this needs to be done, and created a little function that will wrap around navbarPage() to allow you to add text to it.
Here's an example:
library(shiny)
navbarPageWithText <- function(..., text) {
navbar <- navbarPage(...)
textEl <- tags$p(class = "navbar-text", text)
navbar[[3]][[1]]$children[[1]] <- htmltools::tagAppendChild(
navbar[[3]][[1]]$children[[1]], textEl)
navbar
}
ui <- navbarPageWithText(
"Test app",
tabPanel("tab1", "tab 1"),
tabPanel("tab2", "tab 2"),
text = "User: Dean"
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)
I want to create a welcome message for when a user first opens the shiny webpage. Currently I have it such that it is constantly on the first tabPanel. Is there a way to make it disappear when the user navigates away and then back to that panel?
fluidRow(
column(width=12,
tabsetPanel(type = "tabs", id = "tabs1",
tabPanel("Express Usage", wellPanel("Welcome! Please select the libraries you are interested in viewing from below and use the tabs to navigate between graphs. It is best to limit your selection to no more than 5 libraries at a time"), plotOutput("express_Plot", height=400)),
tabPanel("Juvenile Usage", plotOutput("juvenile_Plot", height=400)),
tabPanel("test", h3(textOutput("text_test")))))
),
You can set the value attribute for all your tabPanels accordingly.
In this way, you can tell, in server.R, which tab is currently selected by reading input$tabs1, where tabs1 is the id you set for the tabsetPanel.
Replace the wellPanel with a uiOutput element, and update the UI elements according
to:
The current panel.
The times the panel has been visited.
ui.R
library(shiny)
shinyUI(fluidPage(
fluidRow(
column(width=12,
tabsetPanel(type = "tabs", id = "tabs1",
tabPanel("Express Usage",
uiOutput("welcome"), # replace the wellPanel
plotOutput("express_Plot", height=400), value="ex_usage"),
tabPanel("Juvenile Usage", plotOutput("juvenile_Plot", height=400), value="juv_usage"),
tabPanel("test", h3(textOutput("text_test")))), value="test")
)
)
)
server.R
library(shiny)
shinyServer(function(input, output, session){
visits <- reactiveValues(times = 0)
output$welcome <- renderUI({
if (input$tabs1 == "ex_usage") {
isolate(visits$times <- visits$times + 1)
if (isolate(visits$times) == 1) {
return (wellPanel("Welcome! Please select the libraries you are interested in viewing from below and use the tabs to navigate between graphs. It is best to limit your selection to no more than 5 libraries at a time"))
}
else {
return ()
}
}
})
})