Example UI

[nzagorchev]

Overview

Add Example app with UI.
The app supports tracking (events, profile properties, user login), variables and app inbox.

Functionalities:

Tracking

• record event with parameters (follow the input placeholder)
• push profile properties (follow the input placeholder)
• user login
• set and add multi properties
• increment and decrement property
• remove property
• set DOB
• record event and charged event with dates
• displays Account Id and CleverTap Id (device Id).
• texts can be copied to clipboard by tapping on them.

Variables

• Defines different type of variables
• Sync variables
• Fetch variables
• Print (log) variables
• Displays the defined variables name and value. Values are updated on change/fetch.

App Inbox

• Initialize Inbox
• Show Inbox using a custom config

Toast

Shows toast-like popups.

In-Game Debug Console

Integrates In-Game Debug Console package to see and filter the console logs in the app. The console can be shown or hidden.

Implementation

The SDK is launched in the App script. The account settings can be set on the App game object.

UI

The app has a MainScene with a bottom tab bar navigation. It has four panels. Each panel is scrollable. The content inside the panels is created programmatically by the panel Script Component.
The More tab opens a panel which has Options sub menu.

The app uses prefabs for the main components.
Input Panel - Title, InputField, Button. The InputField resizes vertically based on the input text entered. This resizes the whole component to fit the content. Additional button can be added to the component using script.
Button - simple prefab with a button.
KeyValue - Panel with two texts - key and value. The key takes 30% and value takes 70% of the horizontal space. The component resizes vertically depending on the text set to either key or value. The text boxes use auto resize with min and max font size.

Additonal scripts are added to help improve the UI.
RefreshContentHelper - refreshes content to display objects correctly. Needed when content is added dynamically and objects have ContentSizeFitter set to preferred.
ClickableText - script to handle pointer clicks and provide delegate, used in KeyValue.
MouseWheelScrollRect - custom ScrollRect that enables mouse wheel scroll over elements.
ScrollInputFieldFixer - enables scroll over input fields, drag and end drag scroll and mouse wheel scroll.

Toast - displays a Toast. It uses a resource. It does not need to be added to the scene. Show using the Toast.Show static method. The toasts are queued. The toast duration and position is customizable.

The elements rounded corners are done using an Image component with a sprite. Different rounded options are added as sprites in the Sprite folder.

Scripts

Each menu and panel has a separate script that builds its UI. The scripts instantiate different prefabs and set the delegates/actions.

App - initializes the SDK.
NavigationMenu - the main menu.
Logger - custom logger that uses Unity Debug Log but adds a prefix.
AdHoc - the Ad hoc tracking (analytics) tab scripts.
AppInbox - the App Inbox panel.
Variables - the Variables panel.
QA SDK - the More tab menu and scripts.
Prefabs - the prefab scripts
Utilities - util scripts
Toast - the Toast object and the UI manager for it.