This article contains random tips and tricks we and our customers have come across in our work with Intuiface. If you have a tip or trick you'd like to share, tell us!

Add placeholders

Pre-defined behavior for items opened from a collection is not yet available. For example it is not currently possible to set an asset as pinned or static as the default opened state when using a collection's "tap to open" behavior.

To bypass this behavior, you can use one of the following workarounds:

1 - Before adding the assets into a collection, set them to Maximized. This option can be found under: Properties->ContainerBehavior->Initial view state: "Maximized"

2- Place a hidden asset placeholder in your scene then use triggers and actions to show and replace the placeholder when the collection asset is tapped

Example:
WHEN (image nested in Asset Grid) - is tapped - THEN - [replace placeholder image] + [Show placeholder]

To see this theory in action, download this sample experience

---

Two Text Input Keyboards on the same scene

This is a Design Accelerator which consists in a Pinboard with two Text Input assets. The keyboard will always be displayed at the middle bottom of the Pinboard. You can instantiate the design accelerator as many times you need. Rotating the entire Pinboard will also rotate the keyboard within.

To add this Design Accelerator, simply copy the content of the downloaded zip file under the following folder:

C:\Program Files\IntuiLab\Intuiface\Composer\Resources\Design Accelerators.

You will then find the keyboard under Design Accelerators tab in Composer.

NOTE: The text inputs or any other content you add in the Pinboard cannot be manipulated by drag and drop during edit mode. You can move the assets around and re-size them from the Properties panel.

Download the design accelerator

---

Create a preloader for web pages

If your web pages takes too much time to load, you might consider adding a pre-loader that will visually enhance the experience.

To create a preloader you can Use the "Link is clicked" and "Link is changed" triggers of the web browser.

Prepare your own preloader (image or animated gif that will be shown as soon as navigation is performed and hidden once the page finished loading (or the url changed).

For example:
• WHEN Web Browser - link is clicked - show Preloader • WHEN Web Browser - URL changed - Hide Preloader

To see the theory in action, download this sample experience

---

Dynamically change the text color of buttons

To change the text color of a button when pressed, you can bind the button's color to a text asset or a global variable then change the text or variable value using triggers and actions.

When button is pressed - set color A
When button is released - set color B

To see the theory in action, download this sample experience

---

Fade in/out effect between maps

The Mapbox integration gives you limitless map display options.

You can use show/hide actions with animations to slowly show one Map asset while hiding the other.

To see the theory in action, download this sample experience

---

Creating a dynamic list

The Shopping List Interface Asset enables you to add and remove items from a list dinamically.

As an alternative (described below) you can use the Share via file-system Interface Asset to populate an ordered collection dynamically.

As an example we have used the Excel Interface Asset in which we have referenced some image files, we then used the Share via File-system Interface Asset to display the excel images in a Carousel with the is dropped trigger on it.

To see the theory in action, download this sample experience

---

Random assets position

In an Excel Interface Asset, you can have the position, orientation and size of each asset on your scene. Using this approach means that the same images will always appear at the same spot, but they will be different in size, rotation and position one from another.

You can generate the values for the asset position using an online integer generator such as https://www.random.org/integers/.

To see the theory in action, download this sample experience

---

Password protected section using Text Input

You can use a Text Input's validation methods by adding a custom regular expression . In the regular expression input box, you can setup the password that will be validated or not when the text looses focus.

On the Text Input you can use the following triggers/actions:

WHEN Text Input - validates the entered text - THEN - Action
WHEN Text Input - identifies invalid text - THEN - Action

To see the theory in action, download this sample experience

---

Dynamic sliding menu - Accordion

You can use bindings between assets to create dynamic slide menus. On the bindings using Math & Logic Converters you can add an offset for your assets positions.

NOTE: the show and hide actions needs to be carefully calculated, if one of the asset does not finish the animation while a new animation fires, it will result in a misplaced secondary asset.

To see the theory in action, download this sample experience

---

Predictive Text Input

You can create a predictive e-mail text input using the following approach:

• On the Text Input, set a conditional trigger like the following:
  • WHEN - text is updated (IF Text of Text input contains @) - THEN - Show - Predictive buttons (see image 1 for more details)
• On the Buttons, set the following trigger:
  • WHEN - Button - is pressed - THEN - Text Input - Set text (use bindings to get the value from the text) + Binding Converter to concatenate the value after @ (See image 2 for more details)

To see the theory in action, download this sample experience

---