Advanced Folder Plugin Tutorial
Hi there! And welcome to our Advanced Folder Plugin video. If you haven’t done so already, please watch our System Overview Video first before continuing. It lays down all of the plugin basics you’ll need for this video.
Now, onto the Advanced Folder Plugin. The Advanced Folder Plugin is essentially an upgraded Folder Plugin with added features. With the Advanced Folder plugin you can add existing plugins, create new plugins, or create groups so that you can group your plugins together in a hierarchy. In the past, you’d have to create folders within folders to have the same effect. If you wanted to do this in the past, then you would have had to create a folder plugin then inserted folder plugins into it. The problem is, if you wanted to move one folder or plugin into another, you would have had to deleted it from the previous folder, and then reinserted it into the new folder. Now, you can simply click, drag, indent and drop.
Let’s first create an Advanced Folder plugin. To add one to your app, go to Plugins and Add Plugin. Search for the Advanced Folder Plugin in the search field, click add, then name it. I’d suggest naming it after whatever you plan on putting inside the folder, such as Important Plugins. If you’d like to also add this plugin to your Side Menu, you can simply check this box. If not, no worries, we’ll go over how to add it to the Side Menu later on in the video.
You’ll see two tabs, Content and Design. Under Content you’ll find the Image Carousel, Body, and Plugins sections. Content is where you control and change up whatever you put into the plugin. Under Design, you’ll find List Layout and Background Design. This is where you decide on how the content will be displayed.
Let’s start with Content.
The first section is the Image Carousel. This controls the rotating images you see at the top of the screen. To add an image, just click Add Image and this will open up the Media Library. Then, select as many images as you’d like and click “Insert Images”. If you do not have any photos in your Media LIbrary, then you can upload them by clicking on Upload Images. For more information, check out our Media Library video here. After you’ve inserted the images, they should appear in the emulator here.
The Body section is powered by our Text WYSIWYG plugin. Use this section to describe the function of your Advanced Folder Plugin, and insert anymore relevant images and links if you’d like. To learn more about how to use this section, just check out our Text WYSIWYG plugin video here.
Now here’s the fun part: the Plugins section! This is where you get to play around with plugins and folders. This part is organized by Groups and Plugins. Every Group is another folder. Within every Folder are Plugins you can add or create. The cool part is that you can also put Groups within other groups. Let me show you an example.
I’m going to create the first group called Important Documents. To do that, click “Add New Group”. Here you can select any icon or image you’d like to represent the Group. Leaving it blank will default it to the folder icon. Next, give it a name.
Now you’ll see it appear in this list here as well as the emulator to the side. Now let’s start adding in some important documents. For this example, I’ll use the PDF Viewer Plugin and the Webview Plugin as my documents. The PDF Viewer Plugin can link to an online PDF and the Webview Plugin could link to something like an online Terms of Service agreement. I already have a PDF Viewer Plugin created, so to add it into this folder all I have to do is click “Add Existing Plugin”, search for the Plugin, select it, and click Apply at the bottom.
Now you’ll see it appear at the top of this list here, it hasn’t been placed inside the group that we wanted, which is the Important Documents group. Before I show you how to put it into a group, let’s create a Webview Plugin. Click on Create New Plugin, find the plugin you’re looking for and select it by clicking on “add”. It should now appear in your list here.
To put those plugins into that group, click on the plugin, drag it below the Important Documents group, and then move your mouse slightly to the right. Once you see the little shadow box thingy indent a little bit, let go, and your plugin should now be inside of the group you dragged it into. Again, click, drag, indent, drop. You can do the same with other groups. Just click, drag, indent, and drop.
Here are a few more tips for using this plugin:
Once you place things into a group, a little blue arrow should appear. Clicking this will expand or collapse your folder.
If you’d like to change the order of the groups, just click on the three lines here and drag it to wherever you’d like. Don’t forget — indenting will cause it to join a group, but if you don’t indent, then that will just change the order.
To change the name of your group, just click Edit. This will bring up a little window where you can make the changes. Don’t forget to click Save.
To delete a group or plugin, just click on the red X next to it. If you’re getting rid of a plugin, clicking on the X will not delete it from your app entirely, just from the folder.
That’s it for the Content tab! Let’s move onto Design.
List Layout is where you can change up how your Folders are displayed. If you select a layout that requires an image, and you get this weird picture here, you’ll have to go back to Content, click edit on the group, and change the icon to an image under the “My Files” tab. There’s a lot of options you can choose from, so have fun selecting one!
Under List Layout is the Background Image Section. This is where you can upload an image to bring a little life to your folder, if you’d like. Just be careful which image you select. You’ll want the text on the screen to still be legible.
And with that you’re all done with creating your Advanced Folder! Don’t forget to click Publish to push out your changes. If you haven’t upgraded, please upgrade so that you can publish your changes.
Now if you just created the plugin and did not add it to the side menu or to a Folder, it’s not yet accessible to users because you haven’t placed it anywhere in your app. You will need to add it to the app on the Home Plugin, in a Folder Plugin, and/or to the Side Menu. If you already know how to do this, feel free to skip this next section.
If you have the Launcher or Folder Plugin selected for your Home Plugin, you can add it to the Home Plugin by clicking on Home Plugin. Once you’re there, scroll down and click “Add Plugin Instance”. Now find the Plugin you created by searching for the title you gave it, selecting it, and clicking “Apply” at the bottom.
To add it to a Folder Plugin, navigate to any Folder Plugin you’ve created and click on “Add Plugin Instance”, then search for the title you gave it, select it, and click “Apply” at the bottom.
To add it to the Side Menu, go to Plugins then Side Menu and click on “Select Plugin Instance” and, you guessed it, search for the title you gave it, select it, and click “Apply” at the bottom
Congratulations! Your Advanced Folder Plugin is now accessible within your app. Thank you so much for watching. Be sure to check out our other Help Videos and we’ll see you next time!