Shiny UI Editor Feature Tour || Nick Strayer || Posit (RStudio)
The Shiny UI Editor is a dynamic drag-and drop interface to help you design beautiful Shiny apps. The Shiny UI Editor is a visual tool for building the UI portion of a Shiny application that generates clean and human-readable code. The goal of the Shiny UI Editor is to allow people to build the broad-level UI for their Shiny app without writing code. The editor is intended for those who may not be comfortable with the HTML-style code of Shiny’s UI functions or who simply don’t want to fiddle with sizes to get things laid out correctly. Learn more about the Shiny UI Editor here: https://rstudio.github.io/shinyuieditor/ And read up on GridLayout here: https://rstudio.github.io/gridlayout Content: Nick Strayer (@NicholasStrayer) Producer: Jesse Mostipak (@kierisi) Editing and Motion Design: Tony Pelleriti (@TonyPelleriti)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
This is what you get when you open up the UI editor, this is kind of like the base screen and so we have kind of three columns going left to right and so the elements panel has all of the various different UI components that you can put in your app that you can control with the UI editor so we have action button, numeric inputs, plot outputs, cards and plots and stuff like that, everything that you would need to make a basic app, more of which are coming soon.
So then moving over to the right we have the kind of just app view and this isn't like an exact view of your app, it's more of an abstract representation of the app with the intent of basically being a visual representation of the code and the reason why is that a lot of times your actual app may have stuff like dynamic UI in it and so we can't know what that would look like so this is basically a way of, you know, we're going to put things in the right places and we're going to give you kind of the pertinent information but you think of it kind of as a wireframe of your app and then to the right of that we have the properties panel and so if we select a given UI component in the app like editor view on the right hand side you get to see the properties and so you see where that given component is in the tree of your UI so you have the grid page within that you have a grid card and within that you have the slider so and then you have the various settings like input ID, label, the values that you can change and, you know, all of these you change them here and then it will update the app for you.
App preview and undo/redo
You can delete that element down with this button and then beneath that there's a thing called the app preview and so this goes back to the fact that this isn't like a perfect representation of your app you see like this is not a real plot it's just kind of an abstract plot but down here whenever you run the UI editor you get a preview of the app and so this is what the app looks like, you know, actually running and as you change stuff within your app that will update down there so if we change the app title content to be shiny UI editor we go back here we see that it changed here and so you can you never have to turn off the UI editor and restart your app to see what it looks like we'll we'll do that automatically for you we'll also give you like the logs that your app puts out you can refresh the page in case there's something that changed that needs a page refresh so yeah that's that's the very basic set of tools.
And then there's this panel up here has a little bit of control so say we do something like take this move it down here and then move our slider up to a new card over here we say new slider and then we say wait a minute I don't actually like that we can use the back button up here to undo that change go back all the way to where we were maybe we did like it we can redo but let's go back to that so basically these undo and redo buttons are there to save you if you ever get yourself into a situation that you don't want to be in you can always just back up until your app was working and looking the way that you want it to.
So we talked about the element deletions say we want to delete this plot called blue plot we can just click the delete element you can see it down there it's gone but once again let's put it back then we can do things like resize the given component so say right now we have this slider on the left and the plots on the right and then the plot on the top is the same size as the plot on the bottom maybe we want to make the plot on the top be you know maybe a little bit more of the given size so we can just drag this little sizing down here and you see the sizes pop up next to stuff and it uses this thing called an fr which we'll talk about a little bit but that's a css unit so basically it's a ratio of the sizes so we're going to say for every 0.5 units the bottom plot the top plot is 1.5 so it's going to be three times the size we can stop there and go back and see yep it made that change.
And so basically we can use this to fiddle around with the sizes say you know we're dragging this and we see it's 200 or 305 pixels and say we really wanted it to actually be 300 we couldn't get our drag to be there we can mouse over that and just go over here and type 300 and update it that way as well I showed it a little bit before but you can resize these panels within this grid by using these little handles and then you can drag them down so put our settings all the way down there if you wanted to maybe we'd use that to make this plot bigger and yeah you can configure everything to your heart's desire.
gridlayout and grid structure
It is using underneath the hood a package called gridlayout which we are releasing kind of in conjunction with shinyuieditor which allows you to make your apps laid out very explicitly with grids so when you actually look well I guess we can talk about that later but we just define where we want things to be how big the given elements the tracks of the grid are the rows and columns of the grid and then we can just put an element over whatever span of contiguous rows and columns that we want and we know that it's going to be placed right there we don't have to work with kind of arbitrary restrictions such as you know we can only have columns or we can only have rows you can have both basically if you can imagine it you can put it into the grid layout.
basically if you can imagine it you can put it into the grid layout.
We can just add a bunch of columns if we want and we do that by going over to these individual column views and then you see there's a little plus button over here and you mouse over it says add a column so we can do that and then we get as many as we want and so right now we have this name all scrunched up over there but we could you know make it three of the columns or you know whatever size we want to we can resize let's see let's add a bunch of rows as well you know add one here and we're getting a little bit crazy but we can make that there and then we can take our second plot make it that we have this kind of crazy grid structure and what we could do is say you know let's put a text input here so we can drag a text input we're gonna call it you know name field or something like that put that there and drag this bigger you know we could just keep going and building all sorts of arbitrary sizings you know got a title up here maybe we want to put our slider all the way up here probably drag this down a little bit so there's a little bit more space for it basically the the world is your oyster so to speak with what you put in this stuff so so yeah we can we can build any any design that you might possibly want as long as it can be expressed as a grid you can put it on here.
In Excel you know when you have you want to add a column between things you just kind of mouse up in this little area right-click here you don't right-click you just hover and it pops up this little interface you can also delete rows and so it will intelligently say hey you know you can delete this tract because everything that's within it won't disappear so we can delete that but say we tried to delete this tract it won't let us and that's because if we delete it you know this whole element wouldn't have nowhere to go and so you can you can simplify your maybe you get your layout working the way you want to you can then start taking out the various tracks to simplify or you can leave them in it's arbitrary it doesn't really matter you'll see that the code generated for gridlayout you know it's easier to read if you have a simpler layout but you know if you don't it doesn't bother you you can have your have as many columns and rows as you possibly want and you can make things look exactly how you want them to.
UI components: dynamic output, grid text card, and grid plot card
Dynamic ui output is very literally just like output ui render ui. Grid text card is when you just want to have place some text in the grid and so it basically like you see here this title here is given is just a grid text card and so this is a just a component that you just want to put text somewhere you put it in and so it's usually used for like a title of your app maybe a footer it's a pretty simple pretty simple function.
Grid plot card is somewhat so see here this is a grid plot card and that can be put directly onto the grid page and it's basically just like a shortcut for having a card so like this is a grid card if you were to have a grid card and then put a plot in it it's essentially the same thing but a lot of times you just want to put a plot in a given place so grid plot card does that and it takes away some of the annoying details of you know you have to if you've ever put a plot in a Shiny app which i would assume a lot of people have you know that it starts at 400 pixels high and so almost always you're going to want to change that to some other value and grid plot card is smart about that and knows that the grid is going to give you sizing of your plot for you it will set those height and widths to automatically fill the card space that you have and so that's kind of nice just allows you to skip some of the syntax and you know instead of having to have a card and then put a plot output in there and then make sure that the plot output has the right sizing you can just drag grid plot card on there.
Um that's just a you could so you could say right how we have this plot down here so if we delete this plot and we put a plain card here and we call it this you know this plot and then we take a plot output right here and drag it in there so this plot output needs to have this plot set this plot and you see that the height is 400 pixels we want to set this to 100 percent and then you know that's effectively the exact same thing that we get just for free with grid card plot grid plot card.
Another nice thing is that you notice that all of these cards have to have these names you know when we drag something new into here it says you need to name this and that's because gridlayout needs to have some string to identify the given areas that you define on the grid and a lot of times if you're going to put a plot there you probably are making that plot area the exact same string as the plot id that you're using to hook up your plot and so you can get that really easily with grid plot card you put it down there and we just call this this lot say done it automatically hooks it up to that this plot argument you don't have to do that you see in the settings uh name of grid area is this plot and then it automatically does that but we could put a different output idea if we wanted to call it this plot two it's going to break because this plot two doesn't exist but the idea is that we give as nice a defaults as you could want for your plot and then if you need more control you would just put a plot in the grid card.
Placing elements and building layouts
So you'll notice when we put an element so say we are going to drag you know the the child of the grid layout needs to be a grid card of some kind you know we can directly put like the grid plot card there because that's a grid card um so right it's a direct child but if we take something like uh numeric input like we had before and we drag it here it says you can put it on the grid when we put it on the grid it's going to ask us the name of this grid area so let's say mymeric but then if you actually look at this you'll see that it it wrapped it in a grid card and so you still this is a full card you can and you can put more stuff in here if you wanted it depends i think that's up to you the app builder if you want to.
Start with placing your cards you could basically empty your whole app um like down to just a grid just super simple you know you could say okay i want a bunch of columns and i want them all to be the same size we make this one fr so everything is going to be unique like evenly sized although this is 1.5 so we'll change that to one this is 1.5 so we'll change it to one one so now we just have a grid uh and then you could just take your cards and put them on there call this now plot a position it around um and you could just continue to do that uh title header or something like that um if you wanted to you could continue to do that and then place your stuff on there and honestly if you wanted to you could just use the ui editor to build this get your layout and then go into the code and add your stuff within those little uh built out uh skeleton so it's it's kind of we're agnostic about which way you do it.
Sometimes you might want the control of putting the grid card directly but know that anytime you put an item that is not a grid aware item so it's not a grid card um on it it's going to just wrap it in a grid card for you so you can save a step if you want but you know maybe you want to put titles here uh so i say like plot a and then you know you'll get a title for your card first and so you know maybe you want to set it up that way instead of going back and retroactively uh assigning the settings for your given card.
