Styles, Themes, and Templates
Last updated
Was this helpful?
18.5
Last updated
Was this helpful?
This tutorial will walk you through an introduction to styling and themes by using an KitCloud template as a base.
KitCloud Templates provide you with a complete application flow, allowing you to start from a pre-built app and make customizations as you see it fit.
Check out this tutorial if you want to learn more about:
Working with and customizing KitCloud templates
Creating custom UI components
Styling
Uploading and working with custom assets, such as pictures or fonts
Adding headers
Here are the parts of the Airkit platform that you will be working with:
: Preview the application flow from the perspective of a user.
: View data collected from users.
: Create and modify the UI.
: Manage assets, including pictures and custom fonts, for use within the application.
: Make stylistic changes that apply throughout your entire application.
From the Console, click on Create App.
Select the Digital Form for Terms and Conditions template.
Click on Use Template.
The template will open up in Studio.
Click on Preview at the top right corner in order to take a look at the preset application flow.
Since this is a web app, click on the web icon to start.
You’ll land on the first Web Page, so click on Sign me up! to move forward.
Enter some dummy information and click on Continue.
You’ll be then directed to the Terms and conditions page, where you will have access to the Terms and Conditions.
Click on the link for the Modal to pop up. You'll see a paragraph of Lorem Ipsum text. This is intended to serve as a placeholder for your own terms and conditions.
Close the Modal to go back to the Web Page.
Select the box to agree to the T&C and click on Submit.
You’ll get a personalized thank you message.
Now, let’s go back to Studio to see how the information entered in App Preview was saved.
Go to AirData Builder and find the information in the terms_table App Object:
Once a KitCloud template has been used to create an application, it can be edited in the same way that any other application can.
We're going to change the terms and conditions from Lorem Ipsum text to our own custom message.
Go to Web Flows Builder and select the T&C copy Label Control.
In the Properties tab of the Inspector, the text can be changed from General > Text.
You can expand the Expression Editor and type a more appropriate text. Bear in mind that the Expression Editor expects an Airscript expression, therefore the introduced text must be between quotes to designate it a string.
Create a new Markdown Control by clicking the '+' Controls button in the toolbar and then selecting the Markdown Web Control from the options that appear.
Rename the Markdown Control " T&C copy" by double clicking on it where it appears in the Tree and assigning it a new name.
In the Properties tab of the Inspector, enter the following Airscript into the text box under General> Text:
Save the app and go to Preview again to go through the flow one more time and see the changes in the Modal:
Clicking on the Preview button opens the App Preview App Preview Window. This allows you to go through an emulated application Session from a user's perspective. You can also choose the device you want to emulate a Session on, by selecting it on the dropdown list located on the top of the page.
AirData is a database tied to an Airkit app's profile, allowing records to be stored for collection or retrieval, even after a user has closed the app or ended their . Information within AirData is structured according to AirData App Objects.
App Objects ensure sure there is a schema available to structure the information collected by the Web Page fields when building the UI. If you don’t want to keep the captured information in an table, you can create a instead. Custom Data Types do not store information long-term, but still make it possible to structure data in accordance to the expectations of external system of record, which you can send information to via the . For more information on Data Operations and Data Flows, we recommend going through the contents of .
Airscript is a programing language specialized for data manipulation: it's by strategically combining Airscript with input from app users that you control the order, flow, and nature of the interactions between your Airkit apps and the outside world. To get started experimenting with Airscript, see .
We can also take advantage of the Web Control to replace the Text Web Control with something more enriched. Delete the Text Web Control called T&C copy by using the bin icon next to its name in the Tree.
Notice how we formatted each title as Header 2 and Header Header 3 by using Markdown notation. We also assigned a to each of them.
