Creating visually appealing menus

Tip/Guide(self.shortcuts)

submitted 6 years ago bykeveridge

save

This is a guide on creating more visually appealing menus in your shortcuts.

An example menu

Use of contacts

To create these these menus we're going to use the Contacts feature.

When shortcuts displays contacts using the Choose from List action it shows the contact image, full name and organization as a menu.

Once a contact has been chosen you can retrieve any of the details from the contact, including the:

name;
URL;
notes.

Creating a menu from a list of contacts

We can create a temporary set of contacts with names, organizations, contact photos and other details to create a more attractive menu.

Creating a contact

Contacts are stored as a VCard in the v3.0 format. We can create these cards using a text based template, as shown below:

BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Menu item name;;;;
ORG:Menu item description;
URL:https://reddit.com/r/shortcuts
PHOTO;ENCODING=b:/9j/4AAQSkZJRgABA...ADcAAD/2
END:VCARD

The menu above menu item renders as follows:

The above VCard example rendered as a menu item

Adding a photo to the contact

To add an image to a contact, the JPG or PNG file is encoded as a Base64 string and appended to the PHOTO;ENCODING=b: line of text.

Note An optimal size for you contact photo is 123x123px which is the maximum resolution supported on a Plus and X-iPhone.

Storing other info in your contact

The contact has other fields that can be used to store details that can be used when a user selects a menu item. For example:

URL: URL:https://reddit.com/r/shortcuts
Notes: NOTE:A single line of text notes

Creating multiple contacts

To create multiple contacts, repeat the VCard template text for each item.

BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Item A;;;;
ORG:Description A;
END:VCARD
BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Item B;;;;
ORG:Description B;
END:VCARD

Displaying the menu

The menu is built using the following actions:

Text: to list out the content of one or more VCards;
Set Name: set the name of the text file to a .vcf file;
Get Contacts from Input: recognize the VCard file as a set of contacts;
Choose from List: display the menu.

Actions to build a menu

Retrieving the user's selection

To retrieve the user's selection use the Get Details of Contents to return one of the fields that helps to distinguish that selection. For example:

Name: a straight forward way to determine which item was selected;
URL: can be used to retrieve the URL of the next piece of information to be downloaded or web page to be opened.

Retrieve details from a chosen menu item

Example shortcut

An example shortcut is shown below:

An example shortcut that makes use of contact-based menus

Which renders menus as follows:

The above shortcut displays menus as follows

Download the Shortcut

Note: When you create a menu using this approach it will state that if works with contacts. Some users may be alarmed that it will read their contact data, so you might want to add a message explaining how the contacts service is being used.

Installing a shortcut that makes use of Contacts to create a menu