The Outline Action Item Folder is a simple way to organize the structure of folders within your app. You can create an outline within the WYSIWYG editor that creates different folders and sections in the app.

For each line and tab space in the editor, the plugin creates a new folder. To establish a multi-level folder, you need to tab-index the folder titles in the following format:

Level 1

Level 1.1

Level 1.2

Level 2

Level 2.1

Level 2.1a

Level 2.1b

Level 2.c

Level 2.2

All folders can be completely customized within the editor with images, icons, links, and action items as endpoints.

For example, you could start by creating an “About Us” folder. Within that folder, you could have additional folders for “Our Story” and “Our Team.” Then within the “Our Team” folder, you could have a separate folder for each department. In the department folders, you could add an action item that sends an email to that particular department (Example: sales@yourcompany.com, support@yourcompany.com, etc.).

Follow the step-by-step instructions below to apply the Outline Action Item Folder to your app:

When you first add the plugin to your app, you’ll see some sample text in the WYSIWYG editor for an outline:

The sample text follows the same multi-level structure that we mentioned earlier. You can either replace the sample text with your own headers or erase everything and start from scratch.

For the purposes of this tutorial, I’m going to leave the sample text in place, then add my own levels for new folders.

I want to create a primary folder for “Services.” Within that folder, I’m going to have three different services, each with its own pricing folders. So the outline structure will look like this:

Once you’re content with the outline, click “Generate New Outline” to proceed.

Next, make sure that your folders are structured the way you want within the app emulator. After adding a “Services” folder to the sample outline, here’s what the first level of this plugin looks like:

When I click on the “Services” folder, I should see three different services in the second tier:

Now let’s click on “Service B” to verify that we see folders for “Pricing” and “Enterprise Pricing.”

Once you’ve created the initial outline, you can add, remove, or clone levels from this section of the editor:

You can also re-order the levels by dragging them into position.

It’s easy to add or remove custom text in your folders directly within the WYSIWYG editor.

To get the most out of this plugin, you can add action items within your folders. As an example, I’m going to set up a “Call” action in our “Contact” folder.

You can click the “Add Action” button to add a completely new action. But since our “Contact” folder already has a “Call” option, I’m going to click the pencil icon to edit it:

Next, I’ll select my action type from the left side menu. In this case, I’ll navigate to the “Contact” action list and select “Call Phone Number” as my action item. Then it’s just a matter of filling out the form with the phone number and action button text. You’ll also have the option to add an image or icon to this action.

Now when an app user clicks this button, their phone will automatically dial the number.

You can also set up actions for links or other functions within your app.