Skip to main content

Content creation

Applications and templates

The content creation workflow in TicTAP is where you build and configure web applications. These apps allow you to manage and assign content to tags, determining the information that will be displayed when a tag is scanned. Below are the steps to get started.

Creating an Application​

A TicTAP Application serves as the framework for your web-app. It allows you to define which tags are assigned to specific content and manage what information each tag will display.

Steps to Create an Application:​

  • Navigate to the left-side menu and select Apps.
  • Click on the "Create an App" button at the top right.
  • Name your application (e.g., "Vehicles") and click "Create".
  • You can now configure your application and add relevant information. You can either complete these fields now or come back to them later.
  • Once ready, click "Next" to proceed to the tag assignment section.

Creating Your First Template​

Once your application is set up, it's time to design your first template. Templates define the layout and content that users will see when they interact with your tags.

Create or reuse a template for your app:​

  • If you have a pre-existing template, you can assign it directly. Otherwise, click "New Template" to create one.
  • Choose from various template options. We recommend starting with a Page template, which you can design as a landing page.
  • Name your template and begin designing using the provided options. You can add images, buttons, maps, and more.
  • Link the template to other templates (e.g., forms, offers) to create a comprehensive user experience.

Create a template for your app

Creating a Menu for Your Application​

You can enhance navigation within your app by creating a menu. Menus allow users to move between different templates.

Steps to Create a Menu:​

  • Go to the "Templates" section on the platform homepage.
  • Create a new menu template.
  • Return to your app and assign the menu to your landing page.

Assign a menu to your page

For more details on creating a menu, refer to this guide: How to create a menu.

Once you have set up your application and templates, you’re ready to move on to the next stage of TicTAP: managing your assets. Continue to the Asset Management guide to learn more.

Applications

Manage applications

In TicTAP, an Application is a way to link an Asset Type with a sitemap. Applications are built using templates that define how information is displayed when a tag is scanned. Each application starts with a Home template, which serves as the main entry point for users. This home template can link to additional templates, creating a comprehensive sitemap for the application. When a tag assigned to an asset is scanned, TicTAP finds the corresponding application based on the asset type and displays the configured templates.

This guide will walk you through managing applications, covering the creation process, editing, organization, and maintenance.

1. Creating an Application​

When creating a new application in TicTAP, a wizard is used to guide you through the setup. Below are the key steps involved:

Step-by-Step Wizard Process:​

1.1. Setup​

Application setup

Basic Settings:​

  • App Name: Choose a descriptive name for the application that reflects its purpose (e.g., "Warehouse Management").
  • App Description: Provide a brief description of the application.

Advanced Settings:​

  • Tracking Options: Configure tracking settings to monitor how users interact with your application and assets.
  • Offline Usage: Enable offline usage options if users need access to application content without an internet connection.

1.2. Tags​

Tags are crucial for linking your application to physical or digital assets. During this step, you can:

  • Create or transfer tags: You can either generate new tags or transfer existing ones to this application. These tags will be linked to the app and used to display information when scanned.

Application tags

Note: Even if a tag is not assigned to an asset, it can still be moved to an application, allowing interaction with the app without a connected asset.

1.3. Template​

The Home Template is the core of your application. It acts as the main page users see when interacting with the application through a scanned tag.

Choose template

  • Home Template: Choose the starting point for your application. This template is mandatory and will link to other templates in the app. It acts as the homepage of your application, guiding users to other sections.
  • Navigation: From this home template, you can link to additional templates such as forms, offers, or other asset details, allowing you to build out a complete sitemap.

1.4. Design​

After selecting your home template, the Design section allows you to customize the template using a drag-and-drop block editor.

  • Block Editor: The editor provides a set of content blocks (text, buttons, images, maps, etc.) that can be arranged to create your custom layout.
  • Advanced Blocks: You can also add more complex blocks, such as custom HTML code or dynamic data blocks that pull information from asset fields.

Page designer

For a deeper dive into creating templates, refer to the Templates guide.

2. Managing Tags and Applications​

Tags play an essential role in how users interact with applications. By assigning a tag to an asset, users can view the information associated with that asset when they scan the tag.

However, tags don’t always need to be linked to assets to work within an application.

2.1. Moving Tags Between Applications​

You can move tags between applications even if they aren’t linked to an asset. This is particularly useful when you want to test or interact with an application without needing to assign tags to assets.

  • Move tags: You can freely move a tag from one application to another, adjusting its associated content as needed.
  • Testing tags: If you’re building a new application or making updates, moving a tag into the application allows you to interact with the app before assigning it to a live asset.

For a deeper dive into managing tags, refer to the Tags guide.

2.2. Visiting a Tag​

When a tag is scanned using a mobile phone or NFC device, the user is directed to the application’s home template, and based on the asset type, the relevant application is found.

Conclusion​

Managing applications in TicTAP involves linking assets to dynamic templates, creating a sitemap for users to navigate through. With a powerful combination of tags, templates, and flexible settings, you can ensure that your applications are both user-friendly and effective in delivering the information your users need.

For more in-depth instructions, visit the related Content Creation guide or the Asset management guide.

Templates

Links

When editing templates you can connect content easily. You can link content to a button, an image, a card or an item from the content settings of each one of them.

There are different types of links, below we explain what they consist of and how to use them:

This link will allow you to link the element you are configuring to one of the templates you have created. For example, you can configure a button to take you to a maintenance form, or an image to take you to a page with information.

Internet URL​

This link will allow you to link your item to a URL. You can, for example, link a YouTube video, your website or a page with additional information that you would like to share.

File​

Upload a file or a pdf to your Multimedia Library by clicking on the button and add it to your link. In the event that you have uploaded a pdf, you can choose that users can download the file by accessing the link or, by checking the preview option, access a preview of the document. Upload manuals, catalogs or extra information and allow your users easy access.

Phone number​

Add a phone number as a link and allow your users to call directly with just one click. Create a button and add an assistance or emergency telephone number. Allow your users to access your number from the app itself.

Contact by email​

Link an email to a button, image or item so that your users can access your email and send you an email directly by clicking the link. Perfect for linking information or contact mail.

A conditional link is a type of link that allows you to link any of the link types that we have seen depending on the app to which the visited tag belongs. You will be able to generate different types of apps and, with the same template, show different content depending on the app you visit.

Entity​

Entity is a type of Link that allows you to link your block to the current entity, its parent, or its current parent, as long as the block allows you to view them.

In the case of: another of my templates, internet URL and file, you can choose if you want the link to open in a new window, which would allow you to keep your app open while viewing the content of the link.

You will have to first select the type of Content in which you want to add the link. To do this, when you add some type of content to your App, such as an image or a button, the option to add a link will appear within its configuration.

createalink-where.png

In this example below, it is the menu that appears when adding the content block that contains an "Image".

createalink-how.png

In the type of link we can select the type of link as we have described at the beginning of this article. And from here, give the specifications you need at all times to give your App the best possible navigability.

Menu

The menu of the App in TicTAP is an essential element for the user to be able to navigate through the different sections of the App. It is a very important element, since it is the first thing the user sees when they open the App, and it is the first thing they will use to navigate through it.

The menu is created externally, that is, as if it were another independent element outside of your App, in this case a new menu-type template. Then we will return to our App, and from there in the Configuration option and Lateral menu, from there we will select the template-menu created.

Let's go step by step:

Create the template​

Templates

To create a menu you have to create a new Template from the left menu in the Home of the platform (outside the App). We choose Menu type and assign it a name. The 'menu' template only allows you to add one type of block 'Menu item with image'.

Design your menu​

To create your menu, drag as many 'item' blocks as you like and assign content to them. You can link your menu items with other templates, URL's, telephone numbers, emails, files and much more icons or images to accompany the text in the menu, but remember, it will be displayed in a very small size, so avoid putting very detailed content or icons with an excessively thin line.

You can also add color to your menu, and assign specific colors to each of the items. Once you're done, save the changes.

The Menu is created but you have to add it to the other templates of your app. To do this, enter each of the templates (template if you only have one), go to the configuration tab and choose the 'Side Menu' option. Find your menu and assign it with the 'browse templates' option, as shown in the image lower.

Link templates

Tip: You will have to link your menu in your home template to have it always visible.

Check that everything is ok​

Check that the menu is correctly linked by performing a preview of your App, where you will see that it has been added a menu at the top of the Hamburger type. If all is well, enjoy a fast way to access all your content quickly from any template in your app.

How to use variables in templates

Text variables​

To use variables in templates you need to use the notation *|VARIABLE_NAME|* . In this way, the content between the delimiters *| and |* will be replaced by whatever value that variable has. Here are some examples of variables you can use:

Tag variables​

*|tag.name|* contains the tag name
*|tag.description|* contains the tag description

App variables​

*|app.name|* contains the name of the App where the visited tag belongs to. *|app.description|* contains the App description where the visited tag belongs to.

User variables​

*|user.name|* contains the name of the logged in user *|user.email|* contains the e-mail of the logged-in user

Asset variables​

Since in TicTAP a tag can be "stuck" on an asset, the asset information can be accessed through asset variables.

*|asset.name|* contains the asset name. Every asset always has a name
*|asset.external-reference|* contains an external reference of the asset. This is typically used when the asset has an ID other than TicTAP's and it is useful to store it with integration purposes.
*|asset.end-of-life-at|* contains the date when the asset was decommissioned or it is scheduled to be decommissioned.
*|asset.is-eol|* contains a boolean value that indicates if the asset is decommissioned or not.
*|asset.breadcrumbs|* contains a string with the ancestors path to the current asset
*|asset.state|* contains the current state's name of the asset
*|asset.definition|* contains the current "definition" of the asset, meaning its configuration. This is useful when you want to access to specific properties of the asset type: *|asset.definition.{system-field-name}|* . For instance you could access the "name" or the "icon":

  • *|asset.definition.name|* The "Asset type" name
  • *|asset.definition.icon:url('page_card')|* The "Asset type" icon

*|asset.parent|* contains the parent of the asset. Do not use it directly, but access any properties of the parent, as you would do with the asset itself. For instance, if you want to access the parent's name, you should use *|asset.parent.name|*


Some examples: *|asset.parent.state|* contains the state of the asset's parent. *|asset.parent.breadcrumbs|* contains the breadcrumbs of the asset's parent. *|asset.parent.definition.name|* contains the name of the parent's asset type *|asset.parent.definition.icon:url('page_card')|* contains the icon of the asset's parent's asset type.

You can also access the ancestors of the asset. The merge tag

*|asset.parents.{asset-type}|* allows searching any ancestors of the asset. You must use this merge tag in combination with the asset-type "slug", to determine which type of parent you are search for.
For instance: *|asset.parents.warehouse|* would find the first ancestor of this asset of type "warehouse". Once it finds it, you can also use it to extract properties from this asset in the template: *|asset.parents.warehouse.address|*

Maintenance plans variables​

*|asset.plannings|* contains the plannings of the asset, but you cannot use it directly.

You can refer to a specific planning using it's planning-slug

*|asset.plannings.planning-slug.next-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.last-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.status|*

Or you can just access a planning by the order in the list of available plannings for this asset. For instance, if you want to access the first planning for this asset, just do:

*|asset.plannings[0].next-date:date('d/m/Y')|*
*|asset.plannings[0].last-date:date('d/m/Y')|*
*|asset.plannings[0].status|*

Assets may also have a set of custom fields that can be configured depending on the Team you're working. When you need to show that field information for your asset, it is necessary to prepend "asset" to the custom field system name. For instance, if you have a custom field called "My custom field", you should use the following notation to access it:

*|asset.my-custom-field|*

Custom fields variables​

Custom fields can be configured to be used in Tags, Apps and Assets (or Entities). Depending on the origin of that custom field, you need to add the prefix that indicates the location where that custom field resides.

For instance, we can configure a custom field, called "My custom field", which can be referenced:

*|tag.my-custom-field|* *|app.my-custom-field|* *|asset.my-custon-field|* , depending on whether the field has been placed as part of a TAG, an App or an ASSET.

Fallback : default value​

It is possible to specify a default value if the VARIABLE we are referring to has no value.

So, for example, you can specify:

*|asset.field||tag.field|*

Which means: when the TAG_VARIABLE has no value, then use the value of TAG_FALLBACK_VARIABLE

Filters​

You can also use filters on your variables to transform the value of a variable. These are the currently supported filters:

url​

The url filter allows to extract a URL for a file/image present in a variable

*|tag.photo:url('page_card')|*

The optional parameter specifies the "format" of that media, which refers to the "dimensions" of the given image. Currently available there are: "page_card" and "page_thumbnail"

localize​

Uses the "current locale" to conditionally show a text.

*|FILTER:localize({"en":"English","pt":"Portuguese"})|*

date​

A filter of type "date" allows you to format a variable containing a date in different ways:

  • *|tag.date:date('Y')|*
  • *|asset.last-maintenance-at:date('Y')|*
  • *|asset.last-maintenance-at:date('m-Y')|*

But you could also use date with now to create a timestamp, for instance:

  • *|now:date('YmdHis')|*

You can find all available formats in Date Formats

Functions​

You can also use functions in your templates to control the information displayed based on a variable. These are the currently supported functions:

IF / ELSE​

You can use the IF() function to control the information displayed based on a variable

Here are some examples of the use of the IF :

{{ IF(*|asset.field|*, "A2 was true", "A2 was false" ) }}
{{ IF(*|asset.field|*, *|asset.field|*,"A2 was false") }}
{{ IF(*|asset.field|*, *|asset.field|*, *|asset.another-field|*) }}
{{ IF(*|asset.field|* = "foo", "<div>Your HTML HERE!!</div>" ) }

ASSET_URL​

You can use ASSET_URL function to get a direct link to an asset, even if it does not have a tag sticked to it. It requires the id of the asset as only argument:

{{ASSET_URL(*|asset.id|*)}}

ASSET_QR​

You can use ASSET_QR function to get a QR code for an asset, even if it does not have a tag sticked to it.

{{ASSET_QR(*|asset.id|*)}}