What Is an Item and How Do I Use It?

What Is an Item?

Items are the pages of your app. They are the main tool used to display information in your app.

Items are found in the Draggables window once you have selected a Container. They are indicated by a dark grey coloring. There are a handful of different Item types you can add to your app. For example, a standard Item, an Event Item, Destination Item, Contact Item and more.

Items-list.png

Unlike with Containers, there is no functionality difference between Item types. The only differences are the default icons and Properties used on each type. For example, the Places Item type has the default icon of a building and it comes pre-built with an address property.

Every Item type you add will allow you to add various Properties on top of it.

Click here to read information about Properties.

When Should I Use an Item?

You should use an Item when you want to display content in your app. You can use Items to create pages on your app, or pull in existing content from the web to display through the in-app browser. Once the Item is created, you can add Properties on top of it to display information such as:

  • Address
  • Event date and time
  • Contact information
  • Text information
  • Video
  • Podcast feed
  • Link to external website

Adding and Removing Items

To add a new Item, first navigate to the Container where you want the Item to live. Select onto the Container’s title to open up that section. Then, in the Draggables window, select onto the Item you want to add. Hold and drag it over to your content.

Click Here for a Demonstration
Adding-an-Item.gif

To remove an Item from your app, simply select the Item’s icon and drag it towards the app preview. As you do so, you will notice the app preview turns into a red trash can icon. If you drop the icon in this section, it will delete it from your app.

Click Here for a Demonstration
remove-an-item.gif

Types of Items

With the exception of the default "Item,” each Item type has different functionality associated with it. Therefore, it’s helpful to consider what kind of content you want to display before choosing an Item.

The Items you can add to Containers include:

Default Item: Items can be added to Containers throughout the app. Items are the main tool for creating actions and listing out information.

default-item.png

Event Item: The Event Item has Properties that are included as part of the template that work well with event information. An Event Item includes the Timeframe Property to make it easy for users to save the event to their personal calendar. Because it includes date and time information, Event Items are often used in the Events Container where the information will be displayed chronologically.

Event-item.png

If you are adding event content, using the Event Item can make this process faster. The Event Item draggable also works well if you have Favorites functionality in your app and want users to save information about upcoming events to their Favorites. Items that use the Event draggable will save to the same section of a user’s Favorites.

Destination Item: The Destination Item has properties that are part of the template that work well with location information. A Destination Item includes the Address Property to make it easy for users to get turn-by-turn directions. Because it incorporates address information, the Destination item is often used in the Places container to order the items with the ‘Near Me’ functionality.

destination-i.png

If you are adding content with address information, using the Destination Item can make the process faster. The Destination Item also works well if you have Favorites functionality in your app and want users to save information about places to their Favorites. Items that use the Destination Item will save to the same section of a user’s Favorites.

Contact Item: The Contact Item has properties that are included as part of the template that work well with contact information. A Contact Item includes the Add Contact property to make it easy for users to save contact information to their device and uses the square image template so a headshot can be quickly added to the contact. If you are adding contact information to your app, using the Contact Item can make this process faster.

contact-item.png

The Contact Item also works well if you have Favorites functionality in your app and want users to be able to save contact information to their Favorites. Any items that use the Contact Item would be saved to the same section of a user’s Favorites.

Media Item: The Media Item has properties that are included as part of its template that work well with audio or video information. A Media Item includes the Share Property to make it easy for users to share an audio or video link with one tap. If you are adding media content, using the Media Item can make this process faster.

media-item.png

The Media Item also works well if you have Favorites functionality in your app and want users to save media they like to their Favorites. Items that use the Media Item will save to the same section of a user’s Favorites.

Sermon Item: The Sermon Item has properties that are included as part of the item template that work well with sermons. A Sermon Item includes the Share Property to make it easy for users to export their notes. If you are adding sermon information to your app, using the Sermon Item can make this process faster.
sermon-item.png

The Sermon Item also works well if you have Favorites functionality in your app and want users to be able to save sermons to their Favorites. Any items that use the Sermon Item would be saved to the same section of a user’s Favorites.

Webview Item: The Webview Item opens a website inside the app. The Webview Item works best if you want users to go directly to a website without including additional information. If there is more information that should be included along with the website, we recommend using a default Item and adding the Website Property.

webview-item.png

Determining an Item’s Layout and Properties

You can edit an Item’s layout and Properties by selecting on its icon or the pencil icon on the far right-hand side of the content section.

edit-item-lay.png

By the Numbers

  1. Selected Icon
    This will display the icon indicated in the Icon Shortcode field.
  2. Item Title
    This will display as the navigation label in your app. The Item title will also display at the top of the screen when an app visitor is currently viewing that Item.

    Item-title.png

  3. Icon Shortcode
    This is where you will place the shortcode for the icon you want to associate with the Item. You can find the full library of icon shortcodes by selecting the question mark icon on the right-hand side of the row.

    item-icon-sho.png

  4. Layout Option
    You can select from four different layouts available for your Container.

    Simple Text Label

    Item-simple-t.png

    Small Thumbnail Image

    Item-small-th.png

    Wide Image
    Selecting the wide image layout will give you two additional options to customize your Item’s display.

    You can choose to display or hide the Item’s label using the ‘Label’ check box. You can also choose if you want an image overlay or not using the ‘Overlay’ option.

    Web View
    The final layout choice should only be selected if you are using the Item to pull through a web page. You will need to add a Website Property to the Item for this to work. When populated, it with a valid URL, the app user will see that web page when viewing the Item in the app.

    Click here to read information about Properties.

  5. Actions
    Actions are buttons you can add to Items to help a user quickly act on the information provided. For example, actions could be calling a phone number, one-touch social sharing or emailing the contact. The Action Bar will automatically adjust to fit up to three actions. Actions will become available as you start adding properties to the Item.

    action-bar-in.png

    Click here to learn more about the Action Bar in our "Action Bar Best Practices" VisitApps Knowledge Base article.

Adding Properties to an Item

Open up the Item to which you wish to add a Property. You can do this by selecting onto the Item’s icon or edit button. The draggables window to the right will display the available Properties you can add to your Item.

properties-li.png

These Properties include:

  • Image
  • Add contact
  • Address App Link
  • Podcast
  • Blankify
  • Email
  • Phone
  • Facetime
  • Share
  • Plain text
  • Rich text
  • Timeframe
  • User Notes
  • Video
  • Vimeo
  • Website

Click this link to read more about Properties in the "What Are Properties and How Do I Use Them?" VisitApps Knowledge Base article.


Quick Links to Knowledge Base Articles Referenced in This Document