SharePoint Power Hour: PowerApp Controls

[Music] hello everyone welcome I'm Laura Rogers and this is SharePoint power our this is a show that I do every Wednesday at 11:00 central and I cover different topics with SharePoint and office 365 today I decided to talk a little bit more about power apps and talk about all the different types of controls that we can use in power apps like radio buttons and toggle switches and all those fun things and which are especially useful when we start using our power apps on mobile devices so if you've never been to SharePoint power hour before welcome and I have a slack channel which is the name of my SharePoint training company iw mentor it's Ivy IW Mentor dot slack calm and you can always look in the description of this YouTube video to get to be able to fill out the form to join the slack channel if you've never joined it and this is where we have our lively discussion and hey everybody hey Todd and this is where we chat during power hour and where we're able to you guys ask questions and we can try different things it's very it's a very informal demo I do plan on creating for my training company creating some power apps training some very you know polished more formal training but as far as these power our demos they're really just sort of on the fly trying things out demoing things having conversations about it and it's a fun informal so hey yeah it's good to see I see some familiar faces in the chat window people that I have known for years and it's good to see you guys and Todd Clint over here he's got a net cast that he does as well his SharePoint admin net cast so he's Todd Clint calm Tod D K Li and DT and he's got a slack channel also so I joined in there sometimes for his live show where we have lively conversations there too so I will go ahead and get started and what I'm going to do is kind of start digging into just going straight into power apps and digging into all these different types of controls we have and play around with what kind of you know what we can do with them and what some may be advanced settings are going to be with them and I encourage you if you have office 365 if you have power apps to go ahead and try it along with me and figure out as well because this is a brand-new product that is it was telling at my I run the Birmingham Alabama share point user group and I did a presentation on power apps there yesterday and that's what I was telling these guys is that power apps is a new product I mean dig in there and figure it out it's right for writing blog posts and finding little cool things you can do here and there and it's just a whole world waiting to be explored so that's what we're doing we're exploring SharePoint explorers right okay so let me go ahead and share my screen and there we go this is power apps and I'm going to start by creating a new power app and I'm going to base it on just a big blank canvas just so we can have plenty of room to move around so I'm going to use this is the client software the power apps I installed it from the Windows Store and I'm going to just pick a blank tablet layout so this gives me you know completely blank slate to start from starting from scratch and I had the ability to just figure out what my data source is going to be and figure out what forms and controls and just you know whatever I want to do with my app so first of all I'm going to have a data source of SharePoint so I'm going to use a SharePoint list I've already created and the list of all the connections you can use for flow and power apps I've already created the connection to share points so here's my little whether that's Outlook me see SharePoint is right here so I'm connecting I'm authenticating to SharePoint and then I just need to pick which site so sometimes it's easier to just put the URL of your site in here so I'll just type it the long way slash power apps I think that's my little sub site demo sub site than a half alright so it immediately gives you a list of your lists notice this is custom lists in your site it's not showing lists that are not custom like other different types of lists like tasks and issues and things and it's not showing libraries so just kind of that's one of the little drawbacks as of as of now is just that custom lists are pretty much what you have to work with here so what I'm going to do is I'm going to have this test list so we're going to go ahead and go into this test list and create a few just different types of fields just in the SharePoint list to be able to you know try them out and and use different types of controls with different types of fields and show how it works so I'm going to flip over to my SharePoint site in the browser and go to the site slash power apps and go to my test list and I'll go ahead and go to start with my site contents and here's my test list so what I'm going to quickly do is just create a bunch of different types of fields in here to just be able to represent what we can do with different types of controls and the purpose of this is to be able to show you that behind the scenes in SharePoint it's really just you know kind of we're just going to be pulling the fields in so once we get over to power app so you can kind of see and understand where those fields are coming from that's why we're creating them as different types of fields here so when we reference them from within power apps you'll be able to see what you'll be able to you know have that frame of reference as to what they're what they're pointing to so date I'll do a date and time field and do a I'll do a couple of doing another number all right and then ah I'm going to create a person or group just for fun I don't think there are any special fun controls that necessarily have to do with people at groups but we'll go ahead and try it out how's the volume sound guys cuz I was playing around my microphone settings I think it got it a little bit better um it's trying to fine tune it let me see I think as long as I just talk a little louder as I go then it helps okay um is there similar limitation on site columns as there is on the only custom list types um you can use site columns but you there are some types of columns now this was just a little test that I did there are some types of columns that aren't necessarily going to show that that are going to pull in to power apps or that you won't see some columns like when you're doing a gallery some types of columns just aren't available to display in the gallery and then when you're doing a form you're actually going to come across you're going to have more compatibility with more types of form fields in there so as far as my demo list I'll go ahead and just create a few items in this list um see title I guess I could have done this ahead of time right I guess I spent more time playing with my microphone then I did just you know building some demo data everybody having a good January let's see [Music] oh sandy says I found a sort of workaround for the custom list limitation by using an event content type for example in a custom list because she wanted to update a SharePoint calendar with a power app certainly not ideal yes and I think I was actually trying that when I was doing my little issues list over here I created it as a custom list and I was playing with that the other day as well sandy and I added the issue content type to it just so I could see you know that way it pulls in all the fields that come out of the box with issues but you know you weren't creating it as an issue list so yeah and that also with the non custom list that gives you with a non custom list you can't you don't get this modern view so as long as they're custom lists you're going to everything is going to be modern viewing your land your site already so I'm going to refresh that actually let's see probably when I want to select it it'll just start pulling in all the data okay so now I have my data source so now what I want to do is start putting nice pretty things on my forms so this is where we're going to play around with the different controls I have you can see that I have a lot of different things to pick from up here I've got just good old text boxes you can click on some of these and they'll give you multiple other choices like pin input which maybe you could use for signatures right and then when you go to this controls button they're actually a whole bunch of other really interesting looking controls and then the gallery we talked we did a whole power our last time about galleries and then forums are going to be what people are filling out media this is where you can also this is another type of control where you can interact with your when you're using your phone or your tablet interact with the camera or the video and audio microphone and things like that from your phone to be able to take pictures and have them be part of your app etc and then charts are another really fun part of power apps that you could use to display your data data in a nice pretty way I don't know if we're going to necessarily get through every single one of these but we're going to at least try some of them out and put them on the forms and you know kind of see what they do so first of all I have to have something to put the controls on so I'm just going to put an edit form here and then I have to only have one data source in here I'm going to use the one that I have and I'm going to put I'm just going to type test and test is the name of my data source so that one's kind of it's a little misleading because when you start it prompts you to actually create the data source again but I had already created it so then you've got to know to just type test in there and then another little weird nuance in here is going to be you can't really you're not really instantly on the interface for adding your fields but if I click to add a custom card that is what pulls up this other little window that lets me start choosing which fields that I want to show on this form so just a couple of little tidbits I'll go ahead and make this form bigger put it over here and then I don't need this custom card so I click custom card really just to make this window pull up over here but what I wanted was just the ability to start putting these fields in that just exists in my list so for example so what so there's a title field so what I order I click them on in here is the order they're going to start populating on my form so you can see that these are all just pretty much standard field types in here they're not really you know fancy radio buttons or anything but this is kind of what you get just out of the box when you start adding fields now this date field it actually knew ahead of time to put it as a date picker and I can even pick for some of these I can pick whether I want it to be editing a date or viewing text so I can make you just be able to view the date if I wanted to so that's a quick little way to be able to do that and then the person I can view the lookup or edit the lookup so this is actually doesn't look like a people picker in SharePoint does it it looks like a drop-down box but that is going to be my person picker so from where we're going from here is we're going to start playing with inserting some different types of controls and then be able to tie them to our fields to make the controls do things in the fields so let's go ahead and take something like a radio button now when you create a list in SharePoint you create a choice field and you give it some different choices and you pull it into power apps that's actually just going to create it as a drop-down box by default it's not going to create it as a choice feel these last time I checked if even if you have it set as a choice field in SharePoint and it was the same way that it worked that way in info path as well but you could choose radio button as a type of control that you want to insert on here so let me go ahead and take a few of these off just so that I have a little bit more sort of wiggle room down here just start playing with what I want for example a radio button to do so as soon as I insert radio button it's going to stick them on my form now it didn't put them in my form so watch this let me try it again let me see if it makes a difference when I select my form and then insert a radio button nope it doesn't make a difference so I can just put it wherever it doesn't even have to be inside my form alright so it gives me items so you'll notice you notice this before that whenever you pick like for example a gallery it had that same little items option so for the radio button it looks like it needs a list of items so for the items we're going to need some sort of data source to be able to tell it what to pick from so it's not going to have like a nice little pretty picker I don't think see for options it just has nothing but it has I have to go to advanced and then I have to basically has to really just give it a list of items it's not really going to have a nice little sort of pretty interface that you might be used to in SharePoint where you say you know this is the list of items and you just start typing them in there so I need to reference an actual list of things for this we'll go ahead and tap into another we'll go ahead and do another little data source so for in SharePoint I have a list of projects so I'll just pull in the list of projects to be the things that you can pick from in the radio button but then I still need to also attach it to what field the radio button needs to write to right so this can get a little interesting right okay so I'm going to go for items I need to be able to have the data source so I have to go pick what my other data source is going to be and I don't need to create this again I really just need to add a new list so I just collect connect to the SharePoint site that I've already authentic authenticated to and then guess what this could go across sites so what do you guys think about this is awesome that you can go across sites first of all on across web apps across farms across services so it's kind of annoying that it prompts you to connect to your SharePoint site multiple times but that's kind of good that you aren't stuck doing everything within a site right so I want to see what you guys think about that and if you've tried any of these things I know sandy has done some because she said she's done some power ups presentations right so I'll go ahead and connect to projects and pull that in as well so I could pull in multiple other lists from my SharePoint site I could pull in issues customers etc I'll just pull in projects and customers just for fun just in case I need more of those maybe I'll do a list box that's got customer that's gotta you know projects or listbox that's got customers and radio buttons that have projects and we'll kind of look at how those different ones work and looking at the number of controls that exist on the insert tab we're definitely not going to be able to cover all of them but we're going to the important thing is that we're going to cover the concepts and how to get around in here and be able to figure out so because there is there are going to be some standard settings that you're going to be able to kind of dig into when you're using your different data sources so I'm still on my radio box I've got it selected so for items I'm going to type I'm just going to start typing projects and I can see that it knows that I've got a data source called projects and look how cool so now it's actually showing my projects here and if I have a lot of them I could let it just have a scroll box that's kind of awkward though because I have a scroll button but usually when you're using a radio button kind of like the standard sort of best practice for radio boxes is for short lists of things when you have like two or three choices and drop-down boxes are usually when you have longer choice I'm at amounts of choices but notice a really nice thing about this radio this list of radio buttons this is something you have never gotten in SharePoint and you've never gotten an info path the list of radio button choices is actually dynamic so even in SharePoint when you're doing a lookup to something that's dynamic it's always going to show as a drop-down it's not radio buttons and even an info path when you're putting radio buttons on on a form you have to type in what the choices are that's like hard coded on to the form so this is unique this is a dynamic list of radio button choices that you could be able to just change the SharePoint list and then it would update right there in the app so now that I've got my nice little list though how do I tie this control to it I've got it showing the right items now I want it to actually be tied to the right field because I want it to write to maybe let's just say text - so what red shoes here actually want to put that in my text to field okay so let's see how that works so we'll go to we have no like the little sort of easy options screen here we have nothing for the radio buttons we have some radio button options in the contextual ribbon you'll notice the contextual ribbon everywhere in SharePoint so when I pick a radio drop-down box I can choose you know how much space is between all the text I can choose some padding visibility and borders and things like that like for my border I can say I want it to be maybe blue and I want it to be maybe one pixel so now I can see I've just created a nice little border around it and then so let's go look at what is how do you connect it to what what data it's going to go to Sol I'm just instead of trying to dig through all these different properties over here I'm going to be able to look at the same list of properties over in this Advanced tab over here so on select on change so and here's data ok so this is where it's going to have a default value so if I want the default value value to be like contoso project or something like that that's where I could actually just type that here so let's see if I do default default contoso project like that and let's see what it does when I I don't know if it's even going to be able to do anything yet let's let me try and preview it nope so I haven't connected it to like what the backend data needs to be so it's not necessarily going to even know that that you know to be able to show that there's a lot I mean it's really pretty when you connect it to the data and you're allowed to show what all the items are but for it to set a field like be connected to a field that's actually pretty complicated so let's go look at for example my text to my little text box and let's go look at how it knows this is how we're kind of working through this and and seeing how everything functions in here we're going to go see in this text box how does it know what field okay so it's parent dot default so this card that this control is in card text to this card is it's got a value here of this is my field it's called text two so when I click on the text box it's actually just looking at the parent and the parent is the card that it's in so what happens if i take my radio buttons i'm just going to delete it just for fun and just recreate it and what happens when i put it inside of a card does that automatically make it connect to the data no so what i'm going to do is i'm going to take this and cut it and paste it now it can't it still won't do it oh my gosh so you can't put parent basically so that concept that I did of having you know parent and just have it be inside of a card is not going to work for just having that list that I had and just being able to stick it in here so that's fine okay so for the card itself how do we know okay and I can unlock this okay so by default when I insert all these cards they're nice and neat just going down the form and see how it's got this little eye icon well if I want to do advanced things with my fields in here I can go to this advanced screen and I have to actually go out of my way to click this unlock button so once I do that it's actually going to change it to a little X so when I'm taking just a glance at this I'll be able to tell that it's been changed like I've done something customed to it so and I just removed it completely from the thing and so if I kind of wanted to start all over I could just add it back like that so I just added the cardigan okay so for my card itself let's go to the advanced screen and I've got my data field is text too so data field is in quotes text to and then um I'm going to see what my data field is for here for this one so instead of putting default contoso project I'm going to put text to and it doesn't know it because it's not inside of the card alright so here's my here's my control that I put on here as a radio button let's go ahead and do insert another one so let's go unlock this actually I'm going to go unlock this text to card unlock and I'm going to try this one more time look okay that's what it was I just had to unlock it see I had to unlock my card and then it let me put the radio button list inside my card tah-dah alright now let me go ahead and drag and make my card a little bigger sound now this way I'll be able to have text showing here and hopefully be able to make it so that it shows I'll put projects in here it shows what value that I select and make it the radio button right to that field so let me make this whole card bigger okay so unlocking the card that's the key here so when you unlock the card that's what lets you actually put a control into the card so for my data this text box says parent default is the default so let's go now I put it in the same card with the same field so I should be able to do parent default oh okay so I created it as a form but I created it as like a I didn't say like whether it's a new form or display form or what it's supposed to do so okay so at least I have this the ability to tie this to a specific list of projects and the ability to say which data it this radio button connects to okay so we got that far yes unlocking is the key what's tip of the day right perfect okay so now let's go and unlock this number control here and I'm just going to be able to scroll my form down I'm going to go unlock my number control over here and then let's try a toggle so i unlock that and I'm going to go insert a control called a toggle and the toggle is just going to be one thing or another right so let me expand this one down a little bit to expand my whole let me select the whole card here okay and then I can take my toggle and put it down here now what are my toggle options going to be so when I'm dealing with a toggle so I have this little toggle tab up here and I've got value fill which is blue you can change it to red and I've got handle fill so that's going to be the little handle thingy that you drag back and forth and I can change that to maybe green let's see how ugly we can make it and then rail fill is the little rail that you're dragging it on see so that's what it kind of made it look really ugly on purpose and then I can even have a border around my radio button and I can make a little bigger oh that's going to be really nice for mobile right alright then what is my data going to be so I'll do this item not default parent that's what I did instead of this item it's supposed to be parent sorry I like the way it pre fills these in for me okay so then I've got parent default so now that I've got this form let's go ahead and make the form so that it is tied to a particular piece of data in my list so that maybe I could toggle between the items in my list and be able to even have those on the same screen and be able to you know make it show the right item in the list according to what I click on so that way we can work with you know having data here and testing it out so let's go insert a gallery and we learned about galleries last week so we'll go and insert a gallery and then we're just going to make it just plain old vertical text and then like we learned last week we have to point it to or not we didn't put anything pretty any pretty little title or pretty branding on here yet we're just going to say I want this to be my test list so this is the whole list of things which is just one and then we have to make this form so that it is going to show the item that I selected in here so for the form itself I got to go I got to basically I have to select the form so I have to just make sure that I see I'm not clicking on any of the specific controls I just have the whole form selected and then what I want to do is I'm going to have to make it say which specific item is going to it's going to show so that I'm going to say oh I have to know the name of my gallery so I have to Nate give my gallery a nice name so that when I am deciding what to select from the gallery and I'm typing that in my other controls I'll be able to give it a nice name so that what I'm doing right now is trying to select the whole gallery give it a nice name so that it will make sense to me as I'm kind of around in my app so to give it a new gallery I can go here and rename it I'm going to call it tests list gallery because when I'm clicking on something and I want that thing to show in the forum I have to know the name of the gallery and you know it just helps to have nice pretty names for them okay so when I click on something in here whatever item I pick I want that item to be the one that this forum is looking at so again I have to go click select this whole forum like that and then for the item I'm going to say test list gallery dot selected like that look how magic I did something right so let me go ahead and go create a couple more items over in SharePoint so we'll go to my list okay here's my test list so I'm going to create the item a couple more items in the test list and then I'm going to go ahead and just refresh the data source and it'll just you know that will just have more items in there to kind of click around in okay so new no not a new list power apps lists test there we go [Music] okay and then this could be a nice number field some text more stuff and this way I'll have some values in here maybe that I can see as I'm going through you know trying out these different controls will do a slider control next and we'll show how that can be used especially for numbers so you can make the slider control default to a certain number and then as people slide it back and forth you have a minimum and a maximum all right so we've got 15 minutes left so we'll be able to demo that as well okay so first of all the key was to unlocking a card so that you can insert items in it and then the key to making it show a certain item in the form is you have to say you know which gallery and you know the thing that I'm selecting to make it show that and then what I want to do now is just go refresh my list my test list just so that I'll have them that other item that I created in here okay and I made this way too big okay so there's the second item so now when I see when I select this second item it shows the second item here oh okay so now I want to make this toggle button get put a certain value like have to do when it related to this value so that maybe when I change it this way it shows a one and this way it shows a two and if you know you could do it like with a boolean field with a yes or no or with two different choices maybe that you have or even numbers so we're just going to keep it simple and just say when it's unselected I want it to be a 1 and when it's selected I want it to be a 2 and then that will write it that will relate it to that specific field in the same card so once I get the toggle button working then I could just delete the text box so that's the idea here is that I'm inserting the other control into the card just to get it functioning and make sure it's working so I can see the value in the text box and then I don't need the textbox I'll go get rid of it later um gee Gillian says how can you create an R code to link to an item a QR code sorry most likely in the same manner that I'm doing these with putting the data putting the QR code in the card and so that it's got that value that data that it's connected to so I'm not sure how the QR code is going to store the data so it might be depend on what kind of field it is but yeah you're right that we probably won't be able to get into the nitty-gritty of that yet okay so here we go on check on uncheck and on select so this is what do I want to happen when this is selected basically versus on check is going to be basically it's selected uncheck is going to be unselected so on check I want it to be um to see if it just takes that value and on uncheck I want it to be one [Music] and then on select I don't know if I necessarily need to have anything and on select so let's try that out let's see if it okay well it was basically the slider has some of the same options in here that it tells you what the values need to be and you know depending on where they slide the item I just let me go ahead and preview this I had a feeling that was going to be the case so we're going to go ahead and again look at the slider and look at how it works because it has it's it's going to be really useful for mobile devices for when you're you know you want them to be able to quickly like use their thumb to do something as opposed to having to get down on the keyboard and start typing so maybe if it's just an easy rating or slider those are going to be nice for be able to use them on the phones alright so I'll go ahead and add another card here in my forum for think I have do number and number two so I'll put number two on here and then in number two I want to I've got a ten in there that's the actual value of it I want to unlock that and then put a slider all right and then so here it just kind of sticks my slider randomly in there I'll go ahead and expand this down and move the slider down here and I can make it bigger as well all right so it's got as far as its data it's got a bunch of information filled in so it's got a:hover fill it's got all these different ways that you can make it look pretty and it's got when it's active it's got a fill color too so you can have different colors for all these different ways that people interact with all these different controls Carlos says can you talk about creating in power-ups to do versus creating without I there isn't a huge difference I just like I just like doing in the client software because you know like I can walk away and not worry about the browser logging me out or you know and I can have them offline and it's just I don't know it's just my preference but there isn't a huge difference as far as what you can do I mean you can I haven't really seen anything drastic that exists in one versus the other now when when the web version first came out it was a little buggy and it was actually sturdier more stable to be able to just do it in the client software but they've you know they've improved it dramatically see it's got data reset so it's got minimum 10 and maximum 100 and the default is 50 so if I if I have 10 as my value it should be like somewhere over here right if I'm now I don't have to have a hundred range I could have you know a rating from one to ten and ten can be the maximum but in here this is where you're going to be able to say make it represent like this value that you've selected and have it be represented you know compared to what right okay so here's my minimum here's my maximum the default for this one could be 50 you know like when you're filling out a new form and then you can even do tooltips etc so what I want to do is of course you can make it look very pretty by doing all these different types of fill and thickness etc you could kind of go nuts with the whole branding aspects of it and then I want it to put the right data in here though so let's go look at I think this one had let's go look at the text box first I keep flipping back to the text box so the data it says default parent dot default and that's what makes it show the value from the card that I'm in and then this one use a sate so this one says data default parent default and then let's go down to the slider it just has data reset it's really annoying I'll do this item I'll do [Music] parent of people okay look at that whoo-whoo-whoo a moment okay so see the number is 10 and it's showing it's representing 10 now so let's go let's save a number in this other one go select this one versus that's a 23 so look the number 23 the sliders over here and the number 10 it's over here so let me take this and actually interact with it let me go preview it oh that's cool so it's not necessarily updating the number that it's showing in the text box but it is showing me the number as I change the slider and it was showing the right value in there when I change that that's setting all right so we've got basically I went in here and just changed it to default is parent default for this and then that way it'll just note if it's a new form it'll know that it doesn't have the parent it's just a new item but if it's an existing form it'll know that that's the field that it's tied to whoo a moment okay we got five minutes all right next week I'm going to next week first of all Monday night I'll be speaking at the Atlanta share point user group so if any of you live in Atlanta I'll be there talking about power apps and then so that's on my speaking engagements page and then on my power our schedule next week I've got SharePoint designer 2013 workflows and user info and that's being able to tap into information about users that you used to be able to do a lot easier in SharePoint 2010 workflows and then on the 25th I'm going to have a friend of mine come over here and be my guest speaker and that'll be a lot of fun Nick Bertolli for my user group and in the mean time we we did get sort of a primer on no we kind of talked about what a lot of your controls are that are available to you and you know the concepts of what they are and how easy they'd be on mobile devices but then we kind of delve into a little bit of first of all the fact that it's a little tricky to get them actually function and second of all there are a ton of different settings and the settings are all different depending on which control you're going to pick I mean there are even fancy things that you can do with maps showing an address from an address field and you can do things with your camera control make it capture a picture and make it save it to that item and so there's a lot that we could delve into and they're having to do with all these different ways to be able to interact in your power app it's just you know we were just kind of touching the surface on sort of what the controls are and then the fact that once you put the put the control on the page it is going to be you know a little bit getting used to as far as how to make it not only show what you want to see but make it right back to the right place and actually be you know interactive with whatever your data source is itself so that part apparently is the trickiest part a lot of the fields that exist in here were pretty the names of them pretty self-explanatory I could see how you could spend probably hours making leaves look very pretty and really getting to the nitty gritty of you know the visual part of the way all these function and make them do certain things when you slide them or press them or hover over them etc so hopefully you guys got at least a little bit of a taste of how to how to use these how to put them in your forums and then how to start at least attempting to set them up so you to use in your apps and also starting I think in a few minutes is a free power apps webinar I just tweeted about it Monday let me pull that up too I got it off the power apps blog basically let me go over there all sideways here alright so we've got the power apps blog and then here it is so this one is in a few minutes so I'll put I'll just put this blog post and the chat window here and I did tweet about it as well there we go so y'all head on over to the power apps to learn from Irwin he's the one I think that he actually came to the when we talked about power apps in power our maybe maybe it was the flow one I think he's the one that came to it anyway this is what you could learn today is the custom api's gateways and data sources anyway I guess I better wrap it up and I'm going to head over to the power apps webinar and I will see you guys next time thank you so much for coming again Laura Rogers SharePoint power our and thanks for figuring out and having fun just kind of on the fly digging into power apps with me have a good day

Channel: Laura Rogers

Views: 13,020

Keywords: SharePoint, Office 365, Microsoft, PowerApps, Mobile Apps

Id: 2BaTjotJXfo

Length: 46min 9sec (2769 seconds)

Published: Wed Jan 11 2017