Now, as you’re all set to explore the world of application with Configure.IT, let's get started!
Visit http://www.configure.it/
Here, you can Sign In or create your account via Sign Up.
To create your account, click on "SIGN UP FOR FREE" and you will be directed to the given form.
If you already have an account, you can directly login to Configure.IT - http://www.configure.it/
Click on "SIGN IN" button and it will redirect you to the page where you enter the credentials like your USERNAME and PASSWORD and sign in.
NOTE : You can also Sign in using your Google+ OR LinkedIn account.
Home page or the Dashboard page presents you Learning Videos, Release Notes and important links as Getting Started, Community, Help Center and Gears App.
Click on “Create Project with Walkthrough” and this will direct you to the ‘Projects’ page. All you need to do is, follow the instructions, stepwise.
There are two ways to start, you can either start with blank project or choose template, we'll start with template instead of designing our own screens. It is the fastest and easiest way to understand the basics of developing a mobile application.
On this page, you can select Platform, Device and Orientation.
Select the template - M-Go and click on ‘Use this Template’.
That’s all ! Your new project is being created by Configure.IT. This activity will take couple of seconds till your project space is being setup. Once your project is set up successfully, you’ll see a confirmation page. This page has links to all the necessary sections to start the configuration.
These links will also be available on project detail screen later on.
A browser based GUI tool to compose App UI and navigation flow for both iOS and Android.
A free mobile app to allow you to preview the app on real device as you build it using App Console.
Design relational database based on MySQL, PostgreSQL or MSSQL by setting up database tables, triggers and views.
API Builder helps you create business logic for your application with the help of flowchart.
Build Data Panel, more popularly known as Admin Panel for content management for your app.
OK, here’s where the real action begins.
We will start with App UI, using App Console to create a new screen in the project we just created.
Click on “Start to configure” button for ‘App Console’
section to proceed.
Configure a smart UI to facilitate real time mobile apps design and development. The workspace shown in the given screen is called the Mobile App Console. Here, the actual screens of your project will be displayed. The drag and drop interface makes it easier to configure the screen.
You can always add/modify the screens by adding /updating controls, changing their properties, etc as per your requirement.
You can add new screen from the option 
1
Enter the Screen name
as "MoviesList1"
2
Select Screen Template
Select the first screen template "Gallery1” from the Grid option. All these are pre-defined screen templates, select as per your requirement and thus you don't create and configure the entire screen from scratch. Saving of time & efforts !
3
Click on "Add screen"
This will create a new screen and will be loaded automatically in the panel.
The given image displays how the newly added screen would look like.
The configured screen can be modified via adding controls, setting properties and actions, etc
Once your screen designing is done, you need real data to be displayed onto the screen, in your case the list of movies. This "real data" is stored in the backend i.e., database. The data that is stored in the database needs to be fetched and displayed on the screen. This entire process is carried out by setting up a connection called datasource between your database residing on the server and the related mobile application screen.
Any data-driven mobile application is based on datasource, where the entire logic of your application resides. You can manage and configure your datasources from the Backend. A typical datasource may/may not have input parameters and mandatorily has a set of output parameters that are used to set the logic of the application flow.
The Data Source Configuration Wizard creates and edits the data source in your screen. This option is available to you on the right panel of the Mobile App Console (You can refer to the above screen). Follow the steps in the upcoming slides to add the datasource for displaying the list of movies on the just configured screen “MoviesList1”.
1
Click on "Add Datasource"
This will add new datasource in the current screen "MoviesList1".
2
Select Datasource
After clicking on "Add Datasource", you will receive a pop-up from where you can choose the API that needs to be added to the current screen. You can select the API from the drop-down menu of Select Datasource, as shown in the given screenshot. [The list of APIs in the dropdown are managed from the Backend, from where you configure your APIs using the API Configuration Interface] Here, select movies_list.
3
Auto-generation of Output Parameters
After you choose the API from the drop-down menu, its related input parameters (if present), output parameters and default API Test URL is generated automatically.
Go to the Output Params tab of the popup to view all the output parameters related to the API selected.
4
Map Output Parameters
The output parameters thus generated need to be
mapped with the specific objects of the current screen
for the data to be reflected properly on the screen.
Select and configure the respective objects from the
drop-down menu for output parameters.
Here, select and map the output parameters with
Form Object
[Form object is selected, the reason being the output
parameters need to be mapped with specific controls of the
current screen for the data to be displayed]
5
Select Object
Clicking on "Form Object", an Object Tree opens up which displays the list of all the controls used in the current screen in a hierarchical structure. Select the control from the list, in our case (as per the screen design) the name of the movie needs to be displayed on the control "LABEL1". Select "LABEL1" and click on SAVE.
Similarly, remaining output parameters can be mapped here.
1
Click on Object Tree
You will find the Object Tree icon on the top left corner of the screen. An Object Tree shows the hierarchical structure of all the controls used in the selected screen.
2
Select the control "GRID_VIEW1" from the Object Tree
This automatically opens the Property-Action window for the selected control. Click on "Actions" tab to configure from the list of actions available for the Grid View control.
3
Select the action "Load"
Here, since the data needs to be displayed on the Grid View of the screen, we need to call the API on the Load event of Grid View. As soon as you click on "Load", a pop-up will appear where you will have to set the action "API Call".
For setting the action "API Call" on the pop-up that appears for the Load event of Grid View.
1
Action Defined
Select the action API Call from the drop-down list.
2
Select Datasource
On selecting the action, its related Action Parameters display. In this case, you need to select the datasource that you need to call i.e., MOVIES_LIST. The droplist for Select Datasource will be populated with only those datasources that have been added to the specific screen. So, make sure to add the datasource to your screen before you set this action for any event on the screen.
3
Click on "Save"
...
A Splash Screen is the first screen of the application with the name, version and logo of the application. It usually appears while the application is launching.
For Splash Screen setting, we need to visit object Tree. Object Tree is a tree like map to show hierarchy of the controls created orderly for a specific screen. Object Tree is generated for every screen of the application.
1
Click on Object Tree
You will find Object Tree icon 
in the top-left corner of the screen.
2
Select Main View
Main View is highlighted in the below screen.Click on 
in property window opened in pop-up, where you will find "Time completed" action. Make sure that "Main View" is selected so that the action is set for the entire screen.
3
Select Action "Time Completed"
On selection, a pop-up will appear. Here, you need to select Redirect from the drop-down menu under the head Action Defined.
1
Action Defined
Select the action "Redirect: from the drop-down list.
2
Select Screen
Select the screen "MoviesList1" from the drop-down menu.
3
Click on "Save" button
This action will automatically redirect user to the next screen [MoviesList1 screen], after the specified time is completed.
Now, as you have configured the iOS mobile application, lets run/preview it using our exclusive preview tool - PreviewIT App. This unique application enables you to see and experience how the end user would view the mobile app developed. To review your application on this tool, it's not at all mandatory to finish the application and submit. You simply need to install the PreviewIT application from the App Store / Play Store. Hence, accordingly you will have to use the PreviewIT App on Apple / Android device, to preview your application.
Here, login with your Configure.IT credentials and select the application that you would like to preview real-time. You can share it with your client too during the mobile app development process. Suggested changes from the clients can immediately be taken care of, which would simultaneously reflect on the previewer app screen. It is a REAL app in REAL time – for easy collaboration between teams and client.
Download the PreviewIT App (iOS and Android) from the links below. Once the app is downloaded, open the app and you will be given a walk-through of the complete application as how to use the same.
Once you Sign in using your Configure.IT credentials, select the project you want to preview. If you're opening the project for the first time, the app will download latest configurations and show you preview.
From next time onwards, you'll be asked whether you want to preview the last version of the application you downloaded OR you want to fetch the last updated configurations. If you select the later option, REFRESH the same screen of the device by just swiping TWO fingers across to instantly see the changes in effect.
We endeavor to maintain a lasting relationship with You.
You can connect with us directly via Live Chat where our Support Team will assist you.
OR
You can raise a ticket via - Support Ticket:
http://support.configure.it/
Follow us on Social Media to stay updated
Chat with our support agents in real time and get answers to your questions.
Have any questions related to sales or getting on board? Send us your questions.
