Screen Management

Introduction

An Application is ultimately a bunch of several screens. Screens act as a container to hold set of controls and used as UI of the Application. An App can have multiple screens for various purposes.

Let's have a look at all the icons you see on the Configure.IT screen to understand it better as well as to give you know-how of each feature.

Screen Management is a panel from where you manage (Add, Modify, delete, clone, reorder) all screens of your project. Along with list of screens, you will find other options on that panel like Object Tree, Controls list, My Controls, etc.

Screen Information

  1. Screen List -This area shows list of all screens along with Screen thumb image and other actions which you can perform related to screen settings e.g. Move Up, Save, Clone Screen, Delete Screen and Move Down. Screen Image is captured based on the screen configuration. The Number in the bracket shows the total number of screens available in the project/app.

    Below are different actions which can help you manage screens :

    New Screen : You can create new screen with this button. Please refer “Create New Screen” section for detailed information on how to create a new screen.

    Search Screen : You can search a screen by its name. When there are many screens available in a project, searching a screen becomes necessary. Enter the screen name and it will filter the screen list with the matching names.

    Re-Order screens : You can change the order of the screens and arrange in a logical sequence. You can push screen up or down using “Move Up” or “Move Down” button, respectively. You can also check the visual sequence and change screen ordering using “ReOrder screen” button

    Reordering of screens can be managed by tapping on the icon . Further, tap on the screen for which you want to change the order. Now, drag the selected screen at the desired position, while other screens will automatically take place depending on the selected screen’s position.

    Do not forget to save the sequence by clicking “Save” button on the panel.

  2. Object Tree - This panel shows list of all objects (controls) added on current selected screen. Objects are listed down in tree format with parent and child hierarchy. Child controls are grouped into one section and displayed together. You can expand parent control to check its child controls, expand or collapse all controls using Expand All or Collapse All buttons and you can also search particular control by its name from the Search bar.

    You just need to select an object/control from this panel for further configuration. You can select multiple controls as well by clicking different controls with CTRL (or Command key on Mac) along with the Left mouse click. Based on selected controls, common properties will be available to configure.

    1. Hide Selected -You can also hide particular control or set of controls using Hide Selected checkbox. It will help you to hide the overlapping controls from configuration panel during configuring a screen with many controls.
  3. Control list -Displays the Library of controls, which you can drag and drop on the screen. The Library is divided into Native controls and CIT controls. You can switch between the Grid form and Listing form with regards to the Library, from the image.
  4. MyControl list -You have the flexibility to save the control along with all the related configurations. You can also save the entire group as My Control and reuse when required. Right click on the control on the screen and tap on ‘Save as Control’. This will save the control to MyControl list.

Action On Screens

  1. Screen Lock -The screen icon will reflect, based upon the platform you’ve chosen on the Project Info page for Device. If ‘Both’ is selected, then Mobile and Tablet icon, both shall reflect here.
    You can lock the screen when you have completed configuring the screen. This will refrain you from accidentally changing the configurations.
  2. Move Up -This will help you move up your screen one place above.
  3. Save - Saving the screen helps you to reuse the screen, if needed. You can Save your screen to reuse in future.
    Tap on the icon and a pop up will appear with the Name and Description. Fill in the details and save it as My Screen.
  4. Clone Screen -Cloning the screen will let you reproduce, exactly the same screen with all the related configurations and controls.
  5. Delete - You can delete the screen which is not required.
  6. Move Down -This will help you move down your screen one place below.

New Screen

Creating a new screen on Configure.IT is very simple process as it provides a step by step guided Wizard. Tap on to initiate the Wizard flow.

Screen Name -Enter the unique name of the screen for the App you are currently configuring.

Same screen will allow you to choose from different options to create a new screen. You can create a blank screen, use any existing template or import photoshop file for customized design.

  1. Blank Screen -Blank screen allows you to start from the scratch. Choose this option to create your own screen with blank template and customize it the way you want.
  2. Select from Template -If you have a clear vision of your screen then using pre-made templates from our extensive template collection will be a quick & easy option for you.
    The screen template will have all the required configurations already implemented, based on the type you select. Use this option to get variety of screens which have UI controls placed in different way.

    Template Selection :

    • The various types of templates available are as under:
    • Listing: Listing type includes simple text based listing or photo gallery style for showing images / photos, listwise.
    • Detail: Detail type includes different kind of detail screens like Profile detail, product detail, Album details, Google Map Screen etc.
    • Form: Different kind of form templates are included in this category. For example, Forgot_Password, Login and Sign_up screens.
    • Other: Other includes different screens that are basically Empty but with some controls.
    • My Screens: This is the place where you can see the screens that you have already saved for its configuration. Yes, you can save the configuration of any screen design and save it as My Screen. That will help you to clone the same screen into same or any other project. Simply save the screen in ‘My Screens’ and reuse it anytime thenafter.
      Once the template for the screen is selected, tap on “NEXT” which will redirect you to choose the relevant API.

    Select API :

    It will show list of APIs which are created in current project. Along with API, it will display which tables are used in that API, what are Input and Output parameters and the last modified date to make your selection process easy.

    Tap on “Next” button to switch on next screen to enter values of input and output parameters, if any.

    Enter Values :

    Selected API in the previous screen will be displayed on top left corner. If no API matches your requirement of the template then you will have an option to “Add New API”. Using which you can fill the necessary details in the New API form.

    If selected API has any input parameters then you need to map some values to those input parameters. Choose the parameter source from the drop down and value for input parameter. For more information about Input parameter configuration, please refer this document.

    The Value of Output parameters are to be set on particular screen objects from Output parameter configuration panel. To help you for this process, left side of the panel will show the screen configuration image.

    Tap on “Advance” to do some advanced level configuration and set advanced properties. You can refer to “Advanced Configuration” to get more details about the same. This option will be visible only for screen types Listing or Form or Detail.

    Tap on “Finish” to come out of the wizard and start working on the screen.

    Advanced Configuration

    • Advanced configuration helps you to configure some advanced properties for the screen. Based on screen type (Listing or Form or Detail), different Advanced configuration parameters are displayed.
    • Pagination : If your API supports Pagination then you just need to select this option and it will enable Paging feature on Grid or Table view for your listing screen.
    • Animation : If you want to apply any kind of animation on loading pattern of Table view data then select this option and pick which animation effect you would like to apply.
    • Pull to Refresh : Select this option if you want to provide Pull to Refresh feature on your TableView or GridView.
    • Section : You can set any parameter as Sectional header on your TableView. If you enable Section then you can set A to Z filter option as well. A to Z filter option displays alphabetic characters filter on your left side of the Table or Grid view.
    • On Success Actions : Select this option if you want to provide Pull to Refresh feature on your TableView or GridView.If your screen type is form and after submitting of your data via Datasource, if API response is successful then this settings will be executed. For Successful execution, you may display any alert (with message), or redirect to any other screen or navigate user to previous screen by Back option.
    • On Failure Actions : If your screen type is form and after submitting of your data via Datasource, if API response is failure then this settings will executed. For failure execution you may display any alert message.
  3. PSD - You can create a screen by uploading a PSD file as well. In this case you will not have to create screen design manually and it will generate screens based on your design of Photoshop file. You can get more help about PSD upload from this document.

  4. Sync Mechanism

    This icon shows for which platform you are configuring means Active platform.

    When concurrent development for more than one platform is going on, syncing is the most important.

    When there are many changes in the screen, Syncing Screen option is chosen and when there are only few single control related changes, Sync Control is useful.

    Configuration Modes

    Various workspaces are provided in App Console to facilitate users with grouping of properties. When a team is working on a project, there can be different stakeholders like Designer, Developer, Tester etc. Every person will have different requirement for different workspace focusing on Design, Development and Actions.

    1. Design Mode : Loading only design properties will save the time as well as increases focus of the user.
    2. Development Mode : This will require all the properties as well as actions.
    3. Action Mode : This mode will show only the actions related to the selected control. No properties will be displayed.

    Loading time can be reduced considerably as well as time can be saved using this practise.

    Go To

    Switching among UI and backend becomes easy with “Go To” option. Using it you can:

    1. Preview : Redirects user on Project >> PreviewIT page from where either he can invite user to preview the App or get information on how to install PreviewIT App.
    2. Download : Access this option to download either .IPA or .APK
    3. Backend : Switching to this option will allow the user to view dashboard of the Backend panel. To get more information about backend, please refer to Backend Management.
    4. Language Manager : Get connected with Language Manager Section using this option.This option will be visible only if the application is multilingual app.
    5. Asset Manager : Get connected with Asset Manager Section using this option.

    User Profile and Hotkey References

    Walkthrough :Clicking this icon will give you a walkthrough of the entire screen as well as also creates new screen for you as sample. This video tutorial is very helpful feature.

    Full Screen : This icon will put the App Console to Full Screen.

    Hotkey References :Clicking on this icon will display the list of shortcuts of the App Console as below :

    Edit Profile: You can edit your profile anytime using this menu item. Refer to Front-end Overview >> Profile.

    Team: If you have subscribed for “Team Plan” as mentioned on our Pricing Page, then you will see the “Team” Tab or else you won't. Please refer to “Team Management” to get complete and detailed information about Team Plan.

    Logout: Pressing this menu will logs you out of Configure.IT

    Right Side Menu

    1. DataSource : Accessing this Menu will display the datasource used in the selected screen. You can edit or delete the datasource as well as add events for datasource. Adding more datasource can also be achieved from here. Refer Datasource Management for more information.
    2. Miscellaneous Settings : Some Application wide common but important features like Splash Screen, Alert View, Side Panel etc. can be configured using this option. Refer Miscellaneous Settings for more information.
    3. Tab Settings : Default Tab setting is Disabled. Enabling it will show all available tabs of the screen and related settings can be configured using this menu. Refer Tab Settings for more information.
    4. Notifications : Clicking this option will display the notifications used in the selected screen. You can edit or delete the notification as well as add events for notification. Adding more notification can also be achieved from here. Refer Notifications for more information.
    5. Third Party : Lists all the Third Party Applications which can be configured. Configure.IT supports many Third Party Apps for now such as Facebook, Twitter, Paypal, Flury, Admob, Google+ etc. This lists gets expanded as we keep on adding more third party Apps here. Refer Third Party Applications for the complete list of Apps as well as more information about how to configure them.
    6. Screen Settings : Common properties of all the screen controls can be set using this. There is an option given if you want to apply these changes to the existing controls or only to new controls. Screen settings are applicable to the current screen only. Refer Screen Settings for more information
    7. Application Settings : These settings are applicable on all the screens of the application. Refer Application Settings for more information
    8. Restore Changes : To revert the changes till the last revision is possible with this option. You can undo the last changes made by you. Refer Restore Changes for more information
    9. Add Notes : Any supportive or additional information can be added using this option. You can add a note related to a control, screen, or the entire App. Refer Add Notes for more information

    Quick Menu

    When any control is selected, it open Quick Menu as shown above. Some common properties are available on fingertips and just a click can make it. Quick Menu options are enabled/disabled depending upon the control selected.

    1. Settings : Tap on this to hide and show all the buttons.
    2. Font : To change the font style and color of the text. Tapping on this button will show below screen.



      • Choose font color of the text of the selected control.
      • Choose font name of the text of the selected control.
      • Choose font size of the text of the selected control.
      • Apply alignment to the text of the selected control
    3. Left Align : Use this option to align left.
    4. Center Align : Use this option for align center.
    5. Right Align : Use this option for align right.
    6. Background Color: Tapping on Background color will open the following screen.

    1. To align selected control on the top with full width i.e. 320.
    2. To align selected control in the center of the screen with full width i.e. 320.
    3. To align selected control in the bottom of the screen with full width i.e. 320.
    4. To align selected control in the left of the screen with full height i.e. 480 or 568 depending on device type.
    5. To align selected control in the center of the screen with full height i.e. 480 or 568 depending on  device type.
    6. To align selected control in the right of the screen with full height i.e. 480 or 568 depending on device type.
    7. To provide selected control full width i.e. 320.
    8. To provide selected control full height i.e. 480 or 568.
    9. To provide  elected control full width and height (full screen) i.e. 320x480 or 320x568.

    All these four quick menu items will be enabled when 2 or more objects are overlapping each other

    1. Bring Forward : The selected object will come forward by 1 level.
    2. Send Back : The selected object will be sent back to the last level.
    3. Bring Front : The selected object will come in front.
    4. Send Backward : The selected object will be send backwards by 1 level.

    1. To save one or more controls as a custom control in MyControls as discussed above in Right Click Options for Control.
    2. To cut one or more selected controls together to paste in the same screen or in other screen  at different position .
    3. To copy the selected control or controls.
    4. To paste the selected control in the current screen or in the other screen.

    1. Embed in View : This option will be used to embed current selected control into a view. For e.g. Hierarchy of objects changes as shown below :

      → Main_View

         → IMAGE_VIEW5

         → IMAGE_VIEW6

      Changes to

      → Main_View

        →VIEW1

               → IMAGE_VIEW5

        → IMAGE_VIEW6


    2. Unembed from View :This option will be used to un-embed current selected control from a view. For e.g. Hierarchy of objects  hanges as shown below :

      → Main_View

        →VIEW1

               → IMAGE_VIEW5

        → IMAGE_VIEW6

      Changes to

      → Main_View

         → IMAGE_VIEW5

         → IMAGE_VIEW6

    3. Link : This option will provide you shortcut to attach any action to the selected control. Clicking on this will open the window as shown in figure :


      The detail description of each action event of the control will be discussed in detail later.

    4. Delete : This option will delete the current selected control.