Experience Tips and Tricks

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!

Table of Contents



    Add placeholders

    Pre-defined behavior for collection detached items is not yet available, in other words it is not yet possible to set an asset as pinned or static by default when using a collection's "tap to open" behavior.

    There are two possible workarounds:

    1 - Before adding the assets in the collection, you can set them as Maximized. This option can be found under: Properties-ContainerBehavior-Initial view state - Maximised

    2- Place a hidden asset placeholder 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 image

    addplaceholder.gif

    To see the 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

    browserpreloader.gif

    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.

    togglemapview.gif

    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.

    TnT-carouseldynamics.gif

    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.

    TnTslidingmenu.gif

    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