Part 1: Build a SharePoint Version History with Power Apps

foreign hi welcome back to a brand new video recently I was working on a PowerApp canvas and um I was trying to recreate the so-called version history which SharePoint lists already have a standard if you activate it and there are of course two ways how to do it either you use a Powerman automated workflow to bring you the version history of that specific item maybe in form of a Json file or a Json format and then you can work with that in the PowerApp that will be the more let's say professional way but also the more difficult way which is you know a bit more work to do with creating a workflow and bring the data back to the app and so on and so forth um if you're not going to have that much data I came up with another way and what I did is I created a separate list on SharePoint and I called that as my history early storms versus needs to release something like that and what I did is that instead of updating items I always saved a or created a new item so for example let's say we have a gallery on our main list and then when we want to um say the the changes of that item we update the changes on the main list but we always create a new item in the history list so that way we can always go back and see the changes that have happened and then I went and created a new screen where I was showcasing the the version history the that was easy part so the tricky part was to Showcase similar like on SharePoint where the changes have happened so if you have like 10 20 columns you don't want to always go through them and check which which changes have happened but um maybe it will be helpful to highlight the changes so what we need to do is to find a way how to compare data inside of a collection and yeah that's what I managed doing with help of my dear colleague Martin lemon which I'm going to tag in the video on LinkedIn so that you can get to know him as well I hope you liked the video make sure that you subscribe to the channel and give it a thumbs up if you uh like the video as I said and have fun watching thanks yeah so here we are in powerapps canvas I've already started a demo application and I'm going to take a look here on my SharePoint list I will use this SharePoint list here that I've already have I'm going to copy this URL and I'm going to add it as a new data so I'm going to search here for SharePoint if I write it correctly there it is I'm going to collect connect to my account and I can also find it from here that I don't have that many sites and I think that was my schools right yeah schools so I'm going to connect to that data source and there it is so what I'm going to do next is I want to add like an edit form and this will be here I also need another screen let's use a blank screen which will be our home screen let's call it home and this will be our edit I'm not going to make the app beautiful so let's stick to the functionality so in the home screen I also want to do on the start clear collect this will be my called schools and the items will be coming from my schools list so I want to have only a limited amount of columns so for that I'm going to use the show columns function from my schools list and I'm going to use ID school name City let's grab here ID cool I think school name was title let's filter and take a look uh yeah let's just link title so that will be my title next I want to have City number of students CT number of students let's grab the subject and the teachers how I'm going to leave the pictures out so we have subjects and teachers okay close that close that and then we should have here our uh clear collect and this is on start so what I'm going to do now is I'm going to click on this Ellipsis and say run on start so this collection should be now filled with data no so these are my schools here if I remove the filtering these are the one that we have here and also cleaned up so I don't have all that uh call all those columns that SharePoint uh has a standard since I don't need them and if I need any new column I can just go here and add a new column okay so now that we have the data Let's uh put a gallery so I'm going to use a blank um vertical gallery and I'm going to connect it to my collection so what I need to see here is maybe a couple of labels so also another trick which I often use is instead of having a label for the um yeah for the title of the column and then the value I you can concatenate them together if that makes sense for your case so what you can say it's for example this is the city we can see it because it says here this item City we can say here in quotes City colon then Bluewell space and then we can use that and icon or end character to do to concatenate the the static part which is the string with the dynamic value okay so uh we had City uh let's bring here a couple more paste paste paste arrange them a little bit better here so that's of course not always citigo so this is City let's have here uh ID again that's not going to look beautiful but we need some information here to be sure which one we have selected school name number of students uh school now it was title that was title uh that was our school name but we don't we can use spaces here oops and let's make this a bit bigger this was then our number of number of students number of students and what else what are subjects teachers okay so subjects it will not be easy to have it in um a label but we can try so we can say for subjects we have this item.subjects this will it's going to complain now because the table so what we can do is we can use the concat function it says that joins all text values produced by evaluating a given expression over the given table into one text value so we can use that it's I hate it when it removes my uh this item these are the subjects so the expression will be um the value and then we want to separate it by a semicolon so we can see here that we have our values from the table separated by a semicolon if you want like a little bit of distance there we can add a space after the semicolon and that's that's how we can do it or maybe with a dash I think semicolon is better okay so the same thing I'm going to do for the teachers and this is teachers this item that teachers but this is not going to be value but let's say display no I think display that's a table let me remove this because it helps teacher so I want to display exactly that's what I was looking for so semicolon space and close the parenthesis and here we have our um three teachers that we can see here as well you can use emails or whatever you want no so it doesn't matter except of images so the display the image of the person will not show up here it needs to be a string so you need to be a text okay so um we have here our Gallery which looks terrible but it doesn't matter at the moment let's uh let's separate this a little bit with maybe it's like a rectangle here something like that just for you know for for us to be to make it a bit easier to distinguish the values okay so uh let's bring idea at the top it doesn't make sense over there and what we also need is also a button but let's take an arrow for that um next Arrow something like that and this now needs to be of course in the gallery that was my mistake so I think should be there and what I want to do is um on select of course of this icon I want to create a new variable which will be called Set uh VA item and the value will be this item so I'm grabbing the whole records and also I want it to navigate me to the edit screen now with I don't know screen transition cover okay so now when I click my next icon or my arrow here I will be landing on the edit screen and if we take a look on the left hand side we have here our variables got it and this should be a global variable and as you can see here we have our of our item which has a record with this value it's not the ID number the title and so on and so forth so the values that we passed from the gallery so what we need in the edit screen is of course an edit form one there and in this edit form I want to connect it with our data source which is schools and I'm going to grab in a second the fields that I need for example attachments I don't need them and it's called picture underneath it as well and I'm going to do this uh the columns it can be one vertical that's fine okay so I'm going to make this a little bit shorter because I want to add here a button which will be my save button okay so what I want to do here before continuing with the save button let me see so we have the school c as a data source but the item is missing which needs to be the VAR item and that way we can see here our information if I click play it's there if I um if I want to create a new one let's take a look what is our default default mode is for more.edits so that means if I am on the home screen and I want to create a new item let's add a button here let's call this new and if I want to create a new button a new item I want to set oops set the the item to blank because I want to empty that and then navigate um not with a call with a semicolon navigate to my edit screen so what happens what happens when I click new is that I comma come to my edit screen as you can see no item to display because our item is empty so the form is in edit mode which means that um it cannot it didn't find anything no so there's no item there to edit that's why it's showing black so what I'm going to do um um is I'm going to say if the item is empty then go informal Dot View otherwise color informal.edit there are maybe much much better ways to do this this is how I do it and it works but feel free to comment uh how you do it if you have a better solution so I'm going to say here if VAR item is blank is gone the item is blank I forget to zoom in a little bit let me do this maybe it's a bit easier for you to view the code so if the VAR item is blank then I want to go in form mode that's new otherwise informal dot edit so let's go back I need a pack button so if I click this one I have here the values let me um create here another button so back save okay so my uh back button does not do anything at the moment but it should navigate me um to home screen so when I want to go back here click new then now I see the fields it's in um it's a new mode and um yeah the arrow is gone okay so if I start typing here so the title let me rename that real quick to unlock it first it's not a panda display name this case this will be this cool name because I use the title column on SharePoint so this cool name let's see what we have here is cool one two three four four let's call it school five City card and a number of students of some other subjects have these subjects here teach us let's grab a couple of my demo people and now we are going to create the on Select Property of the our save button so what I want to do is I want to say if the item is empty I want to um create a new item otherwise I want to update the item so if the item is empty I want to do let's make this a bit bigger I want to create the patch function in the schools source which will be the form three dot updates what I'm missing is also here the defaults from uh schools so this will create a new item what I want also is that um I want to have as my nuva item the item that was recently created so to do so I can do here a set of item and say this will be my new item okay otherwise so the else value will be um a patch function as well into schools where now we need the ID so the ID is our item because the item is not blank no in the else value and I'm going to say again form three Dutch updates so this should be sufficient for our um for our two scenarios so either we have an item and we're editing or updating or we don't have an item and we are creating a new one but we want that item to come back to us as um as a record so that we know what we created and we have it in our by item variable and next I want to do a clear collect of um schools maybe let me grab it from here so it should be the same with also my short columns logic and on Save I want to do that as well okay so let's test it out if I click now save we should have here a new school called School five with the information UNESCO Peak we didn't use that field and also in my item I have an all the school number five should get the information that I just entered now so this is how you can also save the information that you just created in the variable okay so now we're creating and editing in the main list the topic of this video was to create like some kind of a version history so if we take a look at this um item that we just created the version history will be not empty but we'll just show the information that we entered so let's test the editing so if I go now back and say okay I have here my new school with ID number seven I click on that and I'll say um let's add here another subject geography and also let's add another teacher and if I say save this should Now update this item and we have here geography as well and that's a fourth teacher and if we right click it and then check the version history we have here a second version With The Changes that's ID notice I did changes in these two columns where I in a subject kind of teachers he doesn't say what he'd got changed it's just showing where the change happens so for example it's not showing the uh which one was the new one Ellen so Ellen was not here now Ellen is here geography was not here in our geography is here so it's not just showing Ellen and geography it's showing the field and you you need to check by yourself what changed um so how would we replicate this in in powerapps as I said there are two ways we can do a Power automate flow maybe in a second video and see how we can get this information from SharePoint overpowered mode to powerapps but that's a difficult way and um it requires a bit more work and experience and I'm happy to do it in another video but this time we're going to stick on something more simple so what I'm going to do is I'm going to create a new list I'm going to go to site contents I'm going to create a new list uh let's cancel that and say new list from existing so I'm in my site and I'm going to create a list from my schools list and click next and I'm going to call it schools history or yeah let's say history's version history so I mean let's show it in I don't know how to show it there but let's do it because I might call and take a look once in a while so we have now the same list so what I want to do is when I click save and if the um item is blank or not it doesn't matter I always want to create a new item in my school's history list first let's grab that information so let's search here for SharePoint if I could write it right SharePoint my account project management site and then we have here schools history connect to that I also want to create a new collection on start because I need the data in my application as well so this is going to be exactly the same because the columns are also the same but is going to be called schools history and it's going to come from school's history looks like it's not complaining because this should be the same yeah so on run of this application or on start I should have now my collection schools as it was and the collection schools history which is empty we'll see in a second if that works so as I said on the save property or on Save of that button where doing the update or create in the main list and we also collect the data back and what I want to do here next is I want to um do a patch this one so I'm going to do a patch of the information you zoom out think so so I'm going to do a patch of that information but not into schools but into schools history schools history and I'm going to pass that information every time I save so uh let's format the text and next I also want to have my clear collect happening right after it okay so let's test this out um we have our school number five let's open the schools list also so this is our newest entry and when I add here something else let's add math and another teacher running out of teachers here and let's say save so in my schools list this is going to update the item so as you can see here we have no math and that fifth teacher but hopefully in my school's history I now have a new entry as well no with this information let's do another change and let's say more students um even more subjects let's add Bo there biology and uh can I search you for another name maybe with g yeah I have another feature and if I save this in the schools list will add another feature another subject and in the his release this will add a new item so this is my version history again don't do this if you are expecting a tremendous amount of data because this will yeah it will not be problem on SharePoint but pulling all that data and power apps and it we will have to um work around the performance issues then you will have to do a lot of filtering and then delegation issues and so on and so forth so do it if you don't have that much data where I tested uh I didn't have that much data so and I'm not expecting that much data so that's why we are working um this way okay so as you can see we have in our history and the difference is that in my um in my mainless when I click version history as I said I only see the columns have changed but here we are changing everything so we are writing everything because I can I didn't want to go the hustle to see which columns change and update only those uh maybe also something you can do maybe you can test out and let me know so I'm just doing it the easy way in writing everything okay so now we can take a look into our um collection schools history and then we have these items here so what we are also saving here is the ID wait a second this is the idea of the SharePoint itself what I forgot is that on Save into our um schools history we need the ID from our main list so um in our school's history we need a new column I'm going to do a plain text column and this will be the school ID school ID let's make this a little bit bigger as well why is it so small and so I'm going to create a new text column called school ID and this should also save the ID of the school because in the app when I want to check the version history of my item I need to find some items somehow so this ID will not help me so I need to find my the version history of my item based on the school ID so since I already have here a couple of items I'm going to manually edit it so the ID is from this school 7 it's called five it's number seven so I'm going to manually write it here and exit grid view so now we have this cool ID so in the app when we do a clear collection clear collect for the in the on start we do actually collect from the history we need here also need to refresh the school's history first and then turn on start so we need here also our school ID and when I click run on start we have here our school ID number seven also on the save button we have here this click collect again I'm going to paste it there so the issue that we are facing now is that when I click save and I create the version history in my school's history list I have here the school ID but I'm not saving it because I'm just doing a patch with the form updates so what I will have to do is I will have either I must either instead of using form three that updates um do a patch with each of the columns so each of the fields or I will have to save the ID of this um newly created entry in the history list and then do a patch again and update patch then with the school ID because I have the school ID from the item so what we can do here is we can say set the uh item history let's call it that way and this will be our new item history and let's let's test this out let's say here something else blah save it so we should have here our new item you know there it is should cut and on the save button our via item history contains the item that was just saved so what we need from here is ID and what we are going to do is we're doing going to do any other patch function where we say patch in cool history my VAR item history that will be the item that we are patching and then I want to use the column school ID and the value which is going to be saved there is from my VAR item that ID semicolon for my text so again after saving a new entry in the item history no sorry in the schools history this I'm saving that item back to another variable by the mystery why because I want to use it in my next patch action where I'm updating the school ID column with the ID of the school which comes from our item okay so uh let's test it out we saw that this one did not have the school ID because we are not saving it so I'm going to put it again manually and exit with you so now uh if I go and do a change let's put here another couple of I think I have limited that uh I don't know blah blah let's send it it doesn't matter actually it's just about just for seeing the change so when I click save I see in my uh schools that my item has been updated to blah blah and in my school's history I have the fourth element created and now we have the school ID also saved now so I didn't create anything else it just updated that one based on the ID yeah so this is how we can now create the version history and now we are going to see how we can pull this information into the app so that we can um display the version history and also the tricky part displaying the changes now what changed from uh the the latest two versions for example we have version four and three and we can see that the version 3 had suitcase and version 4 has suitcase so this change needs to be somehow highlighted because okay in our case we have four columns but if you have more columns it's much much more difficult to distinguish the change um so what we're going to do next is we have our let me check here do we have our school ID here yes we have it so our uh collection should have all the information we need yeah [Music]

Channel: Enea Liçaj

Views: 2,977

Keywords: Flow, Microsoft, Power Automate, Power Platform, and function, canvas app, collection, functions, learn powerapps, microsoft flow, microsoft power apps, microsoft power automate, patch, power apps, power apps tutorial, power automate tutorial, power platfrom, powerapps, powerapps tutorial, sharepoint, sharepoint list, sharepoint list tutorial, sharepoint list version history, sharepoint tutorial, showColumns, variables, version history, verstion history power apps, with function

Id: 3gEfEonH3Ck

Length: 35min 19sec (2119 seconds)

Published: Thu Aug 03 2023