5. Canvas Apps using Twitter: Configuring apps for offline access
In this video, we’re going to have a look at how we can configure our apps for offline access. So when do you need offline access? Well, you wouldn’t need it when you’re sitting in front of your computer because you’ve got to be connected to the Internet to use this web portal. So this is for your devices, your iPhones, iPads, Android devices. Now it can happen that you don’t have a WiFi signal, you don’t have mobile or cell signal, and so you won’t be able to use online features. So the first question is, should you configure your apps for offline access? It does take a bit more effort. Secondly, should you offer all of the functionality or part of it? So what I’m going to do in this particular video is use a different connector. I’m going to use Twitter.
I’m going to download some tweets, load them into a collection, and then add that into a gallery and then be able to configure it for offline access. So we need to know whether we got a connection or not. So let’s go into the Power Apps portal and go to Data and Connections. So I’m going to add a new connection and this is going to be a Twitter connection.
So click on the plus over here. Now, do you want to use your own application, one that you especially written, or do you want to use a standard one? Well, quite often most of the time you’d use a standard default shared application. So I’m going to create this. Now. It’s going to ask Twitter, do you authorize Microsoft power platform to access your account? And you can see the list of things that it would be able to do. So I’m going to click on Authorize app and it would then turn me back into PowerApps.
Now, the first time I tried this, it took around two minutes. So if it’s not instantaneous, that’s absolutely fine. Now let’s go back to make Powerapps. com. And I’m going to create a new app, a tablet app from Blank. And I’m going to call this my Twitter. So I’m going to click create. So it takes a few seconds. So the first thing we need to do is import that connection. We need to be able to use that connection. So we’re going to go to Data and add Data and connectors and see all connectors. So you can see it is going to be somewhere down here. But what I’m going to use instead is just the search box and go to Twitter. So there is my connection. So my connector is called Twitter. Next I’m going to go into the app, go into the on start and I’m going to create a collection. Now I want it to be a Blank collection. So what function do I use? It is clear collect. So I need to create a collection.
So I’ll call this my Twitter collection and I’m going to get information from Twitter and we can see that we’ve got a few items we can use and we don’t know anything about this particular connector, but we can see we’ve got search tweet. So that sounds like a good place to start. Open bracket. Okay, what am I searching for? What’s my search query? Well, I’m going to look for Udemy and the comma and we can see we can have max results or since a particular ID.
So I’m going to say we’re going to load a maximum of 20 items. So let’s close all of this, all the brackets, that looks fine, no dot there. And I’m going to run on start. So now if I go to file collections, we can see that we have got a My Twitter collection and we have got some tweets there. So let’s now create a gallery. So insert gallery. So let’s create a vertical gallery and I’m going to populate it with My Twitter collection so I can say over here, data source my Twitter collection as well. So I’m going to change this so that it is title, subtitle and the body and let’s edit the fields. I want the body to be the actual tweet. So there are tweet, text.
I want the top, I’m in the middle. So I think middle is going to be created apps and top is going to be who. So tweeted by. Okay, so we’ve got, hopefully if I hold down the old key, I can navigate through. We’ve got some 20 tweets or so far, so good. Now. Am I connected? I’m just going to move this aside. So what I’m going to do is get a label and the text of this is going to be if connection connected, then yes, I am connected. Otherwise I would say no active connection. So yes, I am connected. Well, that’s fairly obvious because I’m doing this through a PC. So now we need to work out, okay, what happens if we’re offline? So if we’re offline, we want to be able to save the information previously and then be able to get it back. So as soon as we’ve got the information, I want to say save data. So I’m going to save the My Twitter collection to a file on my local device.
We’re going to call it my Twitter collection. So that saves the data. But what happens if I load and it’s not connected? Well, let’s see. So I’m going to say if connection connected. So if it’s connected, then do this, what we’ve just done. If not, then I want you to load the data. I want you to load the data into My Twitter collection and I’ll just drag this down. I want you to load from the file called My Twitter Collection. Now, there is a third optional argument with load data. What if there is no My Twitter collection? It will raise an error by default.
So what I’m going to say is actually, I don’t want you to raise an error if there’s a problem. Don’t want you to do that, just ignore it. Okay, so let’s close all of the brackets. There we go. So now let’s run on start. And there we can see if I hold down alt our 20 tweets. So what I’m going to do now is save this as far as we need to go. Obviously creating an app which is available for offline access. There’s a lot more we can do, but this is as far as we need to go for the PL 100. We just need to know the basics. In other words, we need to know that there is a connection dot connected. And we need to know that we can load data and save data from our device. If you’re wondering why save data has this red squiggly underline it’s, because savedata can’t be used as load data in a web browser. So let’s save this. So save this as my Twitter. And there we go, it’s saved.
So what I’m going to do now is go to my tablet. So here I am in the power apps on my iPad and I’m going to go for the My Twitter. So here it is, it’s loading. And here you can see, yes, I’m connected. And these are the 20 most recent tweets, including Udemy. So what it’s done is it’s loaded those 20 into a collection and then save the collection. So what I’m going to do now is go back home and I’m going to go on to airplane mode. So I am disconnecting. So I will go back into my Twitter. It opens, you can see at the bottom it says no Internet.
And you can see at the top left no active connection. So connection connected is false. However, because of that, it has gone and loaded the data from the local version, the local cache, the My Twitter collection file. So, in this video, we’ve had a look at offline access. First of all, do you need to configure it? If you didn’t have any offline access, then you wouldn’t be able to load tweets or do anything that required a connector to the Internet.
If you do, then what you need to do is test for your connection using connection connected. If it’s connected, then you can load information into a collection using Clearcollect and then save the data. If not, you load data from your local file and make sure you use the third argument comma true, so that if that file doesn’t exist, an error is not generated.
6. Move individual apps and flows between environments
Now, in the previous videos, we created a solution, myon money solution, and we’ve put a few things into it. But what if you didn’t want to have a solution which is there to package things up? Maybe you just wanted to export an individual app or an individual floor. Well, we can do this quite easily. So we’re going to the apps and you can see the list of apps we’ve got. So I’m going to just take, take a random app, this one, and I’ll click on the dottedot and next to it you can see export package. That’s also there at the top as well. So this will export it as a Zip.
So we have a name. So this is going to be my export for my package, the environment and description. Now I’m going to delete those. They’re not actually necessary. Then we can go over here to the import setup. So the question is, do you want to update an existing app or is this new to the environment? And therefore we’re going to create this as new. Or in my particular case, we’re going to create this new. So generally you’ll probably just be updating an existing app. So that’s why update is the default. These two icons on the right, that does exactly the same thing as what we’ve just seen. And you can also add a comment as well. So let’s save this and export it. So creating your package don’t navigate away. So it might take a few seconds.
We’re going to do the same thing with our flaws. So I’ve got a flaw here. Remember, we can’t import instant flaws that were created outside of a solution into a solution. So this is really the only way that we’ve got to export it. So I’m going to export this as well as a package. And you can see here we’ve got the same thing. So this is my export flow. In addition to this import setup, we also have what happens to the resources. So this flow has got a notification. So in this particular instance, it’s saying select during import. So the connection would exist in the environment and must be selected when the package is imported. What happens if there is a connector, which isn’t so obvious like a notification? So if I go into my flaws again and go to Twitter language count.
So if I export this as a package, you’ll see that we’ve got the Twitter connection and I’m going to export this one as well and we’ll see what happens. So this is my export floor two. So now they are all exported. What I’m going to do is create a new environment. So you can’t do this if you’ve got the developer plan, because you can’t create environments. So I will go to the admin center, which is where you can do things with environments. I’m going to add a new environment. So this is my importing environment and I’m going to make it a production environment and I’m going to create a database for this environment as well.
So everything else I’ll just keep as default, apart from I will deploy sample apps and data. So this might just extend the amount of time it will take for the environment and the apps to be created. So you can see the new environment is getting prepared, it can be used once active, so it is running as opposed to ready. So I’m just going to pause the video just for a few minutes to allow the environment to be set up fully. But you can see that it has been successfully created right now. You can see that the new environment is completely ready. So let’s go into it going to my importing environment. So it’s got no apps, but I’m going to import a canvas app here.
So I will upload my app. So there it is. So you can see uploading, don’t navigate away. So here is our app. So I can create as new or I can update. So I’ve got the choice when I import. So the fact that I said one as opposed to the other, it shows the default now as that, but I can choose what I want. So I’ll call it import component to click save. So here we can see the comment that I previously put in import. So you can see now importing your package, don’t navigate away and here you go.
After a few seconds, all package resources were successfully imported. So if I go into my apps, well it wasn’t there originally but by waiting a couple of minutes, just pressing refresh, you can see it appear and so I can click on it to play it and you might recognize it from a component that we created earlier with a calculator and here it is. So just to show you what it looks like previously. So it’s not just a component that we have imported here you can see we’ve got a screen as well as a component that we have got in our library. So if I go to insert there, we can see the library component that we have got now.
Just a couple more things about this. If I go to import but it’s not there because all of this is checked. So if I go to import and import it again, then if I say create as new and try import, it says you can’t, you’ve already created an application with the name so you can update it. Or if we go into the created new bit, we have the resource name. So I can call this copy for instance, I can change the name that it imports. And then when you’ve imported it, if you don’t want to wait those couple of minutes for it to appear in the list of apps, you can always open it straight away and you can also share it.
So now let’s go to the floors. So here. I’m in power. Automate. So again, I’m going to change the environment. We’re going to have to create a new environment. It says nothing else, right? I think it just needs updating while it’s still just coming up with the two environments. So what I’ve had to do, it appears to be a cache or timing issue, is go on to a different browser, Microsoft Edge. And here we can see we’ve got three environments, same user. You’ll notice PP in both of them, so it will update. So I’m going to go to my floors and I’m going to import. So let’s upload one of my flaws. So let’s see which one I did first. So that one. So uploading a package, don’t navigate away. And here we can see the flow and create as new, but Notification select during import.
So the package created chosen setup, yes, from the one that I’ve got. So I need it to create a new connection. So let’s click on Create connection. And it’s just the Notification connection, I think. So there it is. So let’s create add connection, refresh list, gone back, click on Notifications and Imports. So again, importing your package. Don’t have getaway right. So you can see it has been successfully imported after about 30 seconds. So it will take a couple of minutes to get onto that list. So I’m going to import the other one, which included the Twitter connection as well. So uploading your package. So we’ve got the import setup as update this time.
So that’s the default. I didn’t change it this time, so see what happens, because it doesn’t actually exist at the moment. And now I need to pin together the notification resource with the one I’ve already got, and then I’ve got to create a new Twitter connection. So this means that basically I’ll be using my own Twitter connection as opposed to the person who exported the package. So I’ll just type in my credentials authorized app. So now I can go back and refresh the list and say, yes, please, and I can’t click on Imports. So let’s just go back to this update. So it says the Apple floor already exists in the environment and will be updated. Well, that’s not the case. This is new. So I’ve got to change it. I’ve got to say create as new. So it won’t just create a new one if it doesn’t already exist.
So let’s click Import and after about 30 seconds, all package resources were successfully imported. So let’s run the floor to make sure that it’s working. So if you remember, this is one that’s going to look at a score or so of Twitter tweets and say, okay, what language are they in? But notice your floor was imported as disabled, so we need to enable it. So this run the floor to make sure it’s working isn’t actually very useful. So we just have to wait a couple of minutes. It’s done. Now to see the flaws. So I will now enable this to turn on. Turn on and let’s run this one.
So everything’s okay. I need to put in a search term. I would put in udemy. Let’s run the floor. You can see the run history. So it’s still running. And it’s sent me a notification which says English 19 nonenglish one. So in this video, we’ve looked at how to move individual apps and flaws between environments. So we can export individual flaws by going to my flaws or going to apps. Click on the dot dot and go to Export package. And then we have to choose whether to have the defaulters create as new or to update. And as you saw, with any flaws, you also have to look the connections. And then when you import them, then you have to tie the connections to connections on your new environment.
