Module Management

Overview

Module Management allows you to design each module of the project. Modules includes input form, listing form and other module or database related settings to be done.

When you open the Module Management section, You will see some default modules pre-made for your convenience based on default tables. All the related settings satisfying general requirements are also done.

It allows you to design the listing and input form interface. You just need to configure it.

Listing Modules

Listing Fields: All the listing headings (highlighted with blue border)are explained below.

  1. Module Name : Shows module name.
  2. Template : It allows you to add different types of template view. Default is standard. (Explained below in detail).
  3. Settings:
    • Settings: It allows you to do general settings related to the module. See Edit Module for more details.
    • Listing: It provides you listing interface. (Explained Listing below in detail).
    • Form: It provides you view (Add/Update form)interface. (Explained Forms below in detail).
    • Messages : It allows you to add your own Failure/Success messages. (Explained below in detail).
  4. Download : If subscribed package includes download, it activates download button against each module.
  5. Update : It will update specific module.
  6. Actions:
    • Edit : It allows you to edit any kind of settings of the module
    • Delete: It will delete specific module after confirmation. Shows module name.
  7. Add New : It will allow the user to add new module and do respective settings for it.
  8. Show All : It will remove the filter and display all the records at once.
  9. Copy Module : It will create copy of the selected module/s in selected project.
  10. Update All the Modules: If you want to update all the module at once, just click on this and it will be done.
  11. Documentation : This will prepare the documentation for the module section describing classes, libraries, functions etc.
  12. Quick Module: This is to add new module quickly with minimum settings.
  13. Login: This will redirect the user to view preview of the Admin Panel designed using module management. You can see login credentials using “i” button adjacent to it.

Add Modules

This will create new Module using table/s already created. Its a precondition to design a database before creating module.

Settings:

  1. Module Heading: Add Module Heading which can be self-explanatory.
  2. Module Name : Based on the Module Heading, Module Name will be taken automatically, though it can be edited.
  3. Physical Record Delete: Selecting “Yes” will delete the record from database and “No” will not delete record from database.
  4. Module Main Table: Select the base / Main table for the module
  5. Module Relation Table/s: You can relate Main table with another multiple Tables. View more details related to how to relate table below at Module Relation Tables
  6. Multi Lingual : If you want to add this module in Multilingual then you can do it.
  7. Add to Menu : When you create module, it will be added to Menu (By default, it is selected) at Admin.
  8. Menu Display: Parent menu is “Home” by default. But you can change it from dropdown. You can also change Menu Display Name as you want.
  9. Dashboard Page : Associate module with dashboard by simply selecting a Dashboard Page from the dropdown. Set the Dashboard Position either to Left or Right. (more detailed in Dashboard Management section).
  10. Description: Detailed description of new module to be created so any new person can understand the use of this module.
  11. Module Relation Tables: It will show existing relation and a link to establish new relation. Check Module Relation Tables section explained below in detail.

Module Relation Tables

If you just want to show records of a table, you don’t need to establish any relations between tables but if you want to show one table data based on another table’s data then you need to define relation of the main table with another table to list the data.

E.g. If you want to display list of admin from specific country then you need to relate “Admin” module with country module and the records will be shown based on the Country Code.

Note 1: If you have defined relation in database then here you can see relation by default. Just select other table from dropdown and after adding relation, you will see below screen.

You can see “Relation Table name & its Primary key” connected with Main table. You can define Alias of relation table.

Note 2: If you change the main module table, the relation will be lost. You need to re-establish it with the same process as earlier.

Detailed explanation of terms:

1. Join Type

It allows you to use different types of joins. Select which one you want to use.

Left : It returns all rows from the left table (table1), with the matching rows in the right table (table2). The result is NULL in the right side when there is no match.

Right : It returns all rows from the right table (table2), with the matching rows in the left table (table1). The result is NULL in the left side when there is no match.

Normal (Inner Join): It selects all rows from both tables as long as there is a match between the columns in both tables.

2. Relation type

You can also define “Relation type”.

  1. One-One: A row in first table can be related to only one row in a second table. A row in second table can be related to only one row in a first table
  2. One-Many : A row in first table can be related to one or more rows in a second table. A row in second table can be related to only one row in a first table
  3. Many-Many : A row in first table can be related to one or more rows in a second table. Deleting one row will in first table will delete all the related records from the second table.
  4. Many-One : One or more rows in first table can be related to only one row in a second table. A row in second table can be related to one or more row in a first table
3. Add (Checkbox)

It is applicable only for One-One relation type. When you select it, you can use all fields of relation table in your Add/Update form

4. Extra Condition

It is used for extra condition with Joins. It is applicable for where condition Shown below is syntax for giving condition:

  1. Single Condition : table_alias.eStatus = 'Active'
  2. Multiple Conditions : table_alias.eStatus = 'Active' AND table_alias.dRegDate >= '2012-10-10'
  3. Request Parameter : table_alias.eStatus = '{%REQUEST.status%}'
  4. Server Parameter : table_alias.vIP = '{%SERVER.REMOTE_ADDR%}'
  5. Example : REMOTE_ADDR, HTTP_HOST
  6. Session Parameter : table_alias.eStatus = '{%SESSION.eStatus%}'
  7. Example: iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus
  8. System Parameter : table_alias.vName = '{%SYSTEM.COMPANY_NAME%}'
  9. Example: COMPANY_ADDRESS, COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION
  10. After clicking on “Next” button, you will be redirected to LISTING CONFIGURATION PAGE that we will see in “Admin Management Part-1 (Listing)” section.

Quick Module

Adding a new module with all the details takes time as many configurations are to be made but in case if you need to make it swift with the basic settings, we have it for you.

Let's get quick view:

The process is divided in 2 steps:

  1. Basic Settings
  2. Advanced Settings
Basic Settings

To add module very quickly, you just need to configure few basic information as below:

  1. Table Name : Select the table from the list of available tables.
  2. Module Heading: Either you can keep the module name intact or change it.
  3. Select Fields : all the fields of the table will be listed.
  4. Listing Fields : Select the fields to be shown in listing.
  5. Form Fields : Select the fields to be added in the form.
    • Show : If you want to show the field or keep it hidden
    • Type : Field type can be selected from a wide range of Standard types (Textbox, Radio Button, Checkbox etc) to Special types (File, Google Maps, WYSIWYG etc.)
    • Validations : Check the checkbox, if you want to add any validation like Required Field, Alphanumeric, Email, Zipcode, Phone etc from the long list of validations. Select the appropriate one. Write/edit the validation message.
  6. Continue : This will redirect user on Advance settings.
Advanced Settings
  1. Extra Information : There are many things user wants to do or doesn’t want to do like. Those can be manage from here as shown in below screenshot.

  2. Listing Fields Order : Default order will be shown and user can change it using drag & drop for listing page.
  3. Form Fields Order : Default order will be shown and user can change it using drag & drop for input form.
  4. Back : This will redirect the user on basic information page.
  5. Create : This will create a new module.

Once you confirm the user that you want to create a module, it will add a new module.

Edit Module

Clicking on Settings icon against the module name, it will be opened in edit mode.

  1. Module Heading: Add Module Heading which can be self-explanatory.
  2. Module Name : Based on the Module Heading, Module Name will be taken automatically. It's not editable.
  3. Module Category: This is shown just for viewing purpose.
  4. Module Main Table: You can view main table attached with the module.
  5. Primary Key: Primary key of the main table is shown here. No edits possible.
  6. Main Table Alias: Default alias name for main table is shown which user can edit.
  7. Primary Key Alias: Default alias name for the primary key is shown which user can edit.
  8. Physical Record Delete: Selecting “Yes” will delete the record from database and “No” will not delete record from database. This will be just for viewing purpose. It will show the option selected while creating module.
  9. Module Relation Table/s: You can relate Main table with another multiple Tables. View more details related to how to relate table below at Module Relation Tables
  10. Menu: Menu category will be displayed.
  11. Dashboard Page : Associate module with dashboard by simply selecting a Dashboard Page from the dropdown. Set the Dashboard Position either to Left or Right. (more detailed in Dashboard Management section).
  12. Description: Detailed description of new module to be created so any new person can understand the use of this module.
  13. Module Help: Apart from description, detailed help, kind of user manual also is an added advantage for user. Optional field.

Listing

You can configure Listing page of the module in two ways:

  1. Either by clicking on Listing icons on Module listing page.
  2. Or continuing on Edit Modules page.
Listing Page part-1

Here is the screenshot of Listing Screen. It's full of many helpful configurations / features which can be easily implemented with just few clicks. Let's see how to configure one by one and also the effect of each feature has been explained in detail too to make the learning curve easy.

Parts of the same screen have been explained to make the learning curve easy.

Primary Settings

Status Field : It will automatically show all status fields in dropdown from the table, if there are more than one. User can select the one he likes to keep. And if there is just one status field, its shown there. This is used to change Status of selected records in Listing page at Admin side.

By default , it will automatically take Enum type field of your Main table. If you don’t have any enum field then it will show blank.

Example : Here we have eGender. (Change status Male/Female) .

Callback Settings : The Symbol adjacent to this field is to callback settings. Let's understand it in detail.

Status Change Settings :

When we change record status after clicking on that status icon, then before status changes and after status change, if user want to call any function then he/she can define the function name and can provide its definition from php functions

  1. Before Change Status : There is list of all predefined functions, user can select from it or clicking on “+” will allow you to add new function. This will affect before the status of the field gets changed.
  2. After Change Status: There is list of all predefined functions, user can select from it or clicking on “+” will allow you to add new function. This will affect after the status of the field is changed.

Save will save the changes and cancel will redirect the user on last visited page.

2) Extra Condition : If user wants to put any extra condition in WHERE condition then this field should be used.

Here are some examples of Extra Condition :

  1. Single Condition : table_alias.eStatus = 'Active'
  2. Multiple Conditions : table_alias.eStatus = 'Active' AND table_alias.dRegDate >= '2012-10-10'
  3. Request Parameter : table_alias.eStatus = '{%REQUEST.status%}'
  4. Server Parameter : table_alias.vIP = '{%SERVER.REMOTE_ADDR%}'
    Example : REMOTE_ADDR, HTTP_HOST
  5. Session Parameter : table_alias.eStatus = '{%SESSION.eStatus%}'
    Example : iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus
  6. System Parameter : table_alias.vName = '{%SYSTEM.COMPANY_NAME%}'
    Example : COMPANY_ADDRESS, COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION

Please Note : User should not specify the below values as request parameters: "file","iModuleId","parModule","parData", "filters","fields","sidx","sord", "export_type","page","rowlimit"

3) Group By : The ‘Group By’ condition is used along with aggregate functions such as SUM, COUNT, MIN and MAX. It is used to group the result-set by one or more columns. It will show all the related fields to choose from to use Group By. It is same as MySQL Group By Function.

Please note that multiple selection of fields is allowed here.

4) Having Condition : Before moving forward let's understand the difference between Group By and Having Condition as non-technical person can have detailed idea.

In Simple terms, Group By is used when you don’t need any condition to set with WHERE clause. The same goal can be achieved by using HAVING condition if you have certain condition.

Example:
Group By : select employee, sum(bonus) from emp_bonus group by employee;
Having : select employee, sum(bonus) from emp_bonus
group by employee having sum(bonus) > 1000;

Data Settings

Checking each checkbox to activate it, will allow user to make more settings for the same feature. “Settings” link will be displayed as soon as you check the checkbox.

  1. Default Sorting : Selecting this checkbox will allow you to add default sorting to your listing page. Multiple sorting fields can be added as shown in below screenshot. Sorting can be in either ascending or descending order. User can select the order from drop down.

    You can even change the order of sorting by using drag and drop. Please check below screenshot to understand how drag & drop works.

    See how it gives effect in Admin Panel:

  2. Default Filters : This will allow you to filter data based on certain conditions. Filtering is very useful feature to save the time of the user and provide specific data according to their requirement. Filtering is same as Having condition explained above in Primary Settings.

    • Filter Settings
      • All: This will show all the records satisfying the condition.
      • Any: This will show only one record satisfying the condition.
    • Search Parameters:
      • Field : Select the table field from the drop down.
      • Operator : Conditional Operators like equals to, not equals to, less, less or equal, is in is empty etc can be selected for comparison purpose/
      • Value : Enter the value to be compared or condition.
      • PHP Function : PHP defined function can also be added.
      • Add New : This will add new row to add new parameter.
      • Delete : This icon is used to delete the row.
      • Save : This will save the filtering criteria.
      • Cancel : This will redirect the user to last visited screen.
  3. Example : In the above screenshot, filtering criteria is set that age should be equals to 12 years (Age = 12 years), it will show following result.

    Please note : Below are some pre-conditions of Filtering, read them carefully.

    1)PHP Function will be considered as a high priority than Value.

    2)If date format is selected, you can pass single date if the Operator is equal, not equal, greater, greater or equal, less, less or equal
    Example : yyyy-mm-dd hh:mm:ss
    Other than that for date format you can pass like below format
    Example:- yyyy-mm-dd hh:mm:ss to yyyy-mm-dd hh:mm:ss

    3)If you want to return values from the PHP function then it should be in below format.
    Example:-
    array("India","Srilanka"

  4. Left Panel Search : This will allow you to add Search on Left Panel. Clicking on this will show “Settings” option and it will allow to configure Left Panel Search related settings as shown in below image.

    Select single or multiple fields from drop down of all the available table fields for searching as per your requirement. It will allow as many blocks as number of fields selected. Let's understand in detail:

    • Display Name : It shows the name of the selected table field.
    • Field Order : If multiple fields are added for search then it will allow you to sort by field order. User can decide which field should be shown first on top in left search panel
    • Data Order : Selection can be made from Ascending and Descending.
    • Data Set : Either Existing data set or Reference data set is selected. Let's understand both types of data sets in detail.
      • Existing:
        • Selecting this option shows you records only if satisfies the condition and Left Side Panel search will show fields accordingly.
        • It is application to the only value which exists in the database.
        • Example: If Gender is the field so possible values can be either Male or Female but if your table consists of records of only Female then left Panel search won't show Male with ‘0(Zero)’ records.
      • Reference
        • This is applicable to all the field values. It won’t check if such record exists or not.
        • If it won’t find any record satisfying the search criteria, it will display “0(zero)”.
        • Example: If we continue with the above example, it will show
          Female : 3
          Male : 0
    • Range : If the data value is Integer, Range field will be applicable. Checking the checkbox will open one block where user can set the range for the data by providing Min Range and Max Range.

      Example : If the female aging between 20 to 30 is to be displayed then Min Range will be 20 and Max Range will be 30.
      Here its shown how this configuration will affect the look of the Admin Panel in below screenshot:


      Depiction of “1” shows the feature of Show/Hide Left Search Panel.
      In above screenshot, user can see search by Gender and Age with number of records. As we have used Data Set = Reference , you can see “Female” with 0 records. If you use Data Set = Existing , then the result will change and “Female” won't be displayed.

Customized BG Color: It allows you to show data with background color to highlight particular cells or rows with this property configuration.

Multiple Conditions can be put to highlight various conditions. Multiple blocks for multiple conditions can be created.

Following fields are explained for better understanding:

  1. Add New : This will add new condition in the same condition block.
  2. Add Record : This will append new condition block.
  3. Delete : This will delete the entire row/record.
  4. Save : This will save the background configuration.
  5. Cancel : This will redirect the user on last visited page.
  6. Operand 1: Place first operation on which condition is to put.
  7. Type / Operator : Select the operator from the list.
  8. Operand 2 : Put value or similar to compare.
  9. Color Code : Either write the color code or select from the color palette.
    • Variable : Selection of variable option should be done if you have set color picker to particular variable. The color will be taken accordingly.
      • How to set color picker to variable ?
      • Go to Add/Update form -> field setting -> set type color picker (check the details below)
    • Static : When you want to highlight with particular color then either add color code or select the color from color box with color picker.
  10. Apply Color : Select the destination where color is to be applied i.e Row, Cell or Text.
    • Row : Color of the row will be highlighted.
    • Cell : Color of the cell will be highlighted.
    • Text : Text color will be changed according to the configuration.
  11. Here are some examples for easy understanding:
    Row:
    Example: If you want to highlight the Rows for both the Genders (Female and Male)
    Row-wise (Condition Configuration) : You just need to select variable (field name i.e. Gender), match with its value using Type/Operator, Select static to give particular color code & apply color in “Row” as shown in below screenshot.

    See how does it looks in Admin Panel in below screenshot :

  12. Cell:
    Example: If you want to highlight Cell if gender is Male/Female, follow the Cell-wise (Color Configuration) as shown in below screenshot.


    See how does it looks in Admin Panel in below screenshot:


  13. Text :

In condition block, you can use following variables using different types of operands (Operand 1 and Operand 2)

  1. Variables : This is same as table fields.
  2. Static : Static value of any table field.
  3. Request : Select the request parameter.
    Examples: status, project_name, category_name
  4. Session : Used for session variables.
    Example : iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus
  5. Server : Used for server defined variables.
    Example : REMOTE_ADDR, HTTP_HOST
  6. System : Used for system defined variables.
    Example : COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION
    If your function is "General defined" function then it should be declared at following path :
    application
    >libraries
    >general.php
    Function in file should look like below :

    function phpFunctionName($dataArr=array(), $id=''){
    // Write your function code here.
    // return your modified "$value"

4.Print Records : It allows you to print the records. It displays available table fields. You can also change printing layout, if required. It also provides different Editor themes.

User is facilitated to preview the code before saving & executing it.
Click on ‘Help(?)’ icon if you want to customize the code. It will provide syntax help for below listed:

  1. Editor Help
  2. Variable Help
  3. If-Else Condition
  4. Section & Foreach Loop
  5. Calling general function
  6. Key / Value Pair

Examples :

  1. If you want to enter the fields then specify the field with it's alias name in between " and " symbols with "$data" prefix.
    Example :
  2. If you want to display a label in different languages then use Display label in specified field with following syntax.
    Example :

6.Grid View Listing : Default layout of the listing page is List View but if user want to change it to Grid Layout, he can do it by checking the checkbox. When the content to be displayed have more images than content, better to go for Grid View Listing as List view allows only text with maximum icon size images so whole attention of the user goes on text only. List view is for Single Column, Whereas in Grid View, multiple columns can be there with text and image type of data.

  1. Grid View Listing shows the available fields of the selected module. Module can be changed using ‘Switch To’ drop down on top-right.
  2. User can select from List View and Grid View from above shown screen. List View provides more details about the product so when it's necessary to provide more textual information to user, List view is selected. But for Clothing sites, Grid View is best as it gives more importance to Images so it becomes easy for our target audience to choose from.
  3. Sample Code and Sample Image are given for both the type of Views to get better idea.
  4. For repetition of records in the Grid, you need to add that html inside the repeat tag.
  5. Note : Only that part of html will iterate which will be inside repeat tag.
  6. You can mark any view as default depending upon the content and audience of the app.

7.Grid Top Filters : While Listing if you want to provide user with direct filter feature for certain fields, you can provide it with this settings. There is no filter used in below given screen.

Checking the option for Grid Top Filter will open below window where you can select multiple fields for filtering. Order of the fields can also be changed by drag and drop. Save the settings.

Configuring Top filters will reflect in the screen as shown in below screenshot.

8.Data Grouping : If you want data to be grouped, this feature is checked. It will show you Settings Window as shown in below screenshot. In addition to using static text, you can use HTML tags and design the text for Data Grouping, Grand Summary and Group Summary.

  1. Group Field Set : This is used for grouping purpose. The field set which can have many number of sub field is used as Group Field Set. e.g Category is the Group Field set as there can be many products belonging to one category and country can be field set for group of states.
  2. Group Field : The field which you want to use as grouping field.
  3. Grouping Text : Either static or HTML text to design how the grouping text would like.
  4. Group Order : How group should order, Ascending or Descending.
  5. Show Summary : If you want to display the group summary, keep checked.
  6. Show Column : If you want to keep separate column for grouping then, keep checked.
  7. Sub Grouping : Checking this option will allow you to provide details for sub grouping.
    I.e. If you grouped products by category and sub categorise by status can also be done.
    Here is the screenshot showing how the Data Grouping will look in Admin Panel.

If you want to change Grouping on run-time, you can use top-right icon and it will reflect immediately.

9.Complex Search : Apart from normal search feature, if you want to avail the user with advanced level of searching where user can use many conditions like AND, OR and && then this option should be used.
Example of Normal Search: (a>b) or (b>a)
Example of Complex Search: (((a>b) AND (b>c)) OR ((a>c) && (c>b)) OR c>10)

10.Expand Grid Listing : It allows you to expand sub grid for a record for showing extra information. You can see multiple records in Expandable grid related to specific record. You need to establish relation over there. Let's understand with example for better understanding.
Example:
Module Name : Country module
Object : We want to expand country with its Multiple State details
Configuration settings:

Select module that you want to relate with your current module. I.e. Select State nodule to be related with country module. Then, just give foreign key relation. Extra condition is applicable for “where” Condition.

  1. Allow Editing: This is applicable only for generated admin panel not for engine. It will allow you to edit records.
  2. Printing : This is applicable only for generated admin panel not for engine. It will allow you to print records.

Let's see Admin preview to get to know how it works in below screenshot:

Here , you can expand your country grid listing by clicking on ‘+’ sign. You will see state listing grid country-wise with its own grid. You can add,delete, change status , search states with pagination.

You can also do inline editing of State details. If you are trying to change unique field of state details & if it already exist then it will not allow you to edit & show you validations error message for duplication. Here “State-Code” is unique field. The configuration set for State module will be reflected in the sub grid.

11.Expand Detailed View : It allows you to expand grid for showing detailed information for specific record. It is not for multiple records showing in grid. It’s only for single detailed information (we have already got idea about difference in List View and Grid View above). Let's continue with the example for have better know-how:

Objective: We have State module & we want to show its country details as its detail view Configuration settings:

  1. Relation Module : Select module that you want to relate with your current module. As State module is the current module, so relation module will be Country module. Then just set foreign key relation.
  2. Extra condition : User can set “where” Condition.
  3. HTML Layout : It will allow you to change HTML layout. When you click on “Details” link, it will show you page where you can change layout (we have seen it before in “Print” option).If you want to remove any field then you can remove it from html. It will reflect on Admin side.
  4. Allow Editing : This is applicable only for generated admin panel not for engine. It will allow you to edit records.
  5. Printing : This is applicable only for generated admin panel not for engine.It will allow you to print records.

Let's see how the changes reflects in Admin preview:

Here , you can expand your State grid listing by clicking on ‘+’ sign. You will see state-wise country details.

You can do inline editing of country details. If you are trying to change unique field of country details & if it already exist then it will not allow you to edit & show you validations message for duplication. Here “Country -Code” is unique field.

Deletion Settings : Many tables are related with each other i.e. all the products are related with category. If one category is deleted then all the products belonging to the same category should be deleted too. Configure.IT provides you with the feature where you can set such deletion Setting using relating a module with the other. If such relations are established and parent is deleted then child will be automatically deleted.

Let's continue with the product -category example given above:

Configuration settings:

You can relate multiple modules to current modules too. Just provide foreign key relation.

Extra condition is the field where you can apply “Where “ Condition.

Now, when you delete category , it will delete all its products.

Extended Class : This uses the concept of inheritance. When the requirement arise to extend the behaviour of the base class, Extended class is added.

  1. Module Name : Select the module where you want to add new class.
  2. Controller Name : Default place where the new class will reside.
  3. Controller Code : Write the code to extend the parent class.
  4. Check Syntax : Use this feature to check for error in syntax.
  5. Description : Write proper description so any new user can understand it.
  6. Status : Select the status of the class
  7. Add : This will add the new class.

Let us understand when can it be used in CIT:

Suppose, you want to customize your Admin panel based on certain condition.

Here, On click of “+” button if you wish to provide user another row to input or view the data.

This is not something which is provided by default from Configure.IT. Therefore, you need to write a custom code for extended classes.

If we have to list Simple step for understanding it. It would be:

  1. Edit JavaScript
  2. Extended Class
    • Controller
    • Model
    • View

1. Edit JavaScript : The option to Edit the javascript for the module is provided on the Module Management. For each module we can add our own javascript. This script is for adding the logic and calling the Extended class Controller.

Controller : The controller is component of Extended class where you define all the function to be performed.

Model : The module is a component where all the queries are written for your required feature. So, In our case it gets the data to show on the view.

View : The view components contains the HTML design element required for the Admin panel. It renders the data from the model into HTML on click of “+” button.

In Nutshell, On Click on “+” button the javascript runs→ which calls controller→>gets the data from the model→ renders into HTML→ providing the required output.

View List of Extended Classes :

14.Add to Data Import : This feature will allow to add fields for data import.

Enabling this option will add the module to Data Import Menu in Utility module in Admin Panel. Select module will list all the modules where this option is activated and user can choose from the drop down list.

Once you are in Admin Panel, user can choose from CSV, excel or any other pre-defined format of file to export. This way the data will be exported from file to main table of the module.

  1. Column Name : This will the list of fields of the table associated with the module.
  2. Hide Column : There would be default setting so you can select from Default, Yes and No.
  3. PHP Function: Auto-complete PHP Function is written to be executed before Data Import. User can also add new function.

Grid Buttons

You can see various different buttons in the grid which user can customize as per his requirement. He can decide which buttons to show and which to hide.

Let's learn how each settings can be done and what would be its effect in Admin Panel:

  1. Column Name : It allows you to hide “Add New” button from top button bar in listing page as shown in below picture. Sometimes when you don’t want to provide “add” feature to your client & want the user to just edit the records, “Add New” button can be hidden using this feature.

  2. Hide Status Button : If you don’t want to use Status button for changing status of selected records then you can set it from here. Many records don’t have status field so better to hide unnecessary fields by keeping it hidden and providing clean look to the user. Here in below example, though “Gender” is used as status field, its not showing “Male” and “Female” in button bar as Status button is set to “Hidden”.
    {
  3. Hide Show All Button : Generally “Show All” button is used to show all the records without any filters or to refresh the page. But if user is going to display all the records in one screen only then there is no need of “Show All button” and you can hide it using this setting. Many a times Hide Paging and Hide Show All are used together.
    {
  4. Hide Export Button: It allows you to hide “Export” button from top button bar in listing page. If you don't want to facilitate user with Export feature then you can hide it using this setting.

  5. Hide Paging : By default, paging is shown at the bottom of each screen whether there are more records or not as shown in below screenshot.

    If you only have screenful of records to show then there is no need to show paging. You can keep it hidden using this setting and it will look as shown in below screenshot.

  6. Pixel Grid Width : If Pixel Grid Width is checked, you can provide the Width in the Field Settings and instead of default width of 75, it will take provided width value as Pixels.

    Here is the difference between Auto Width and Pixel Width:

    • Auto Width
      • It will take width automatically according to your fields based on your screen width in listing page . You can’t see horizontal scrollbar if this option is selected.
    • Pixels Width
      • It will allow you to define width in pixels of your fields in listing page.
      • Using your specified width , if grid width is beyond the screen then correspondly it will add horizontal scrollbar.
      • By dragging column, you can change column width at listing page.
  7. Hide Delete Button : If you don't want to allow the user to delete the record, you can keep it hidden using this setting. It allows you to hide “delete” button from top button bar in listing page as shown in below image.

  8. Hide Search Button : It allows you to hide “Search” button from top button bar in listing page. When you just want to display all the records to the user and don’t want to provide search feature to the user, this setting can be used.

  9. Hide Columns Button : By default, column button is provided to user so he can enjoy the flexibility of viewing as many columns as he wants. But instead if you want user to view all the columns/fields as in the tables, you can make the button hidden using this setting. This will hide “Columns” button from top button bar in listing page.

  10. Hide Search Toolbar : You can see Search Toolbar as shown in below screenshot, using which you can search for any record using any field criteria. If you don't want user to search for records but to see all the records then you can the setting using which you can hide it.

    This is how the Search Toolbar is hidden from listing page.

  11. Hide Multi Select Checkbox : Multi Select Checkbox allows you to select all the records on the page at the same time saving your time and energy. This is useful for multiple edit and delete. It is located at top left corner below button bar as shown in below picture. If you don’t want to provide user with feature like multiple edit/delete then you can hide this checkbox.

    Hiding this checkbox will look as shown in below screen.

  12. Grid Buttons Layout : You Just need to select select the checkbox and it will show the link to view “Settings” page. On clicking the settings button, you will get the below grid button panel from you can add or remove the custom buttons to your module listing page as per your requirement. You also have the option to edit the default Grid button like changing the button title, changing the button icon and setting the button to ‘Icon Only’.

    If user checks Icon Only for Search button as well as Delete Button then it will reflect as shown below in Admin Panel.

    If you want to add new button to facilitate user with new feature i.e. to Send Email, click on “Add New” which will allow you to add new Custom Button and do related settings as shown below:

Action Settings

  1. Add Record In Popup : It allows you to add new record in Popup in listing page at Admin panel. This saves time as user doesn’t need to visit Add Record page, instead it just opens a popup. Admin panel: When you click on “Add New” button, it will show you popup for adding new record as shown in below screenshot.

    User can define the size of the popup window in inline editor as shown below:

  2. Edit Record in Popup : This will allow you to edit the record in popup window from listing page itself. Just select the record you want to edit and it will get open in Popup Window. User doesn’t need to click on record and go to update page. This saves time of the user.

    User can define the size of the popup window in inline editor as shown below:

  3. Disable In-line Editing : By default , Configure IT provides “Inline Edit” records feature for every field on listing page. When you check this property, it will be disabled. This is specially needed when user wants to show records only for “View” purpose and wants to prevent user from editing it.

  4. In-line Add Records : This feature will help the users to add new record on the fly. Without visiting “Add New” window, this feature will allow to add multiple new records with inline add. You will see 3 new buttons next to button bar at listing page as highlighted in below screenshot. They are to Add, Save and Delete record/s. Clicking on Add icon will allow the user to add new record in the same screen as shown below:

  5. Add to Bulk Email : This feature allows user to add this module in Bulk email list. If you add it to bulk email, then it will be added in Bulk Email section In Admin Panel and accessible by visiting Admin → Resources → Bulk email section.

    Marked module will be listed in Send To dropdown as shown in below screenshot.

    Example : If You have “User” module and you want to send bulk email to all users of user module. Just select this checkbox & you will see this module in “Admin → Resources → Bulk email → Module will be added in ‘Send to’ dropdown”. Bulk Mail section is explained in detail in “Admin Management”.

  6. Add to Push Notify: It allows users to add the specified module in Push Notification list. If you add any module to Push Notification, then it will be added in Push Notification section In Admin Panel and is accessible by visiting Admin → Resources → Push Notification section.

    Marked module will be listed in ‘Send To’ dropdown as shown in below screenshot.

    Push Notification section is explained in detail in “Admin Management”.

  7. Custom JS File: It allows you to add your own custom JS (Java Script) files. Its bit complicated for non-technical users but let's try to make the learning curve easy with one example which explains the process:

    How to add JS in Add/Update form ?
    If you want to call JS OnClick of any button/link in Add/Update form , then you can do it. You can even show/hide any button/link by calling function. Just take any custom field & call PHP function from setting.

    Create PHP Function : Below screen is used to create new PHP Function.

    Now , Add custom field and define PHP function name that we have defined

    Now , Add JS & define function which is to be called OnClick of button/link.

    Now , Go to add/update form to see the result.

  8. Custom CSS File: It allows you to add your own custom CSS files for Add/Update form.

  9. Custom Add/Update: This feature allows you to add custom code through function. If you want to customize the standard add/update form in addition to what is supported by Configure.IT then this feature can be useful.

    How to create PHP Function to customize the forms ?
    Go Admin Management -> PHP function (Discussed in Admin Management document).

    In above screenshot we have called a custom defined function to tailor “Group” Page at Admin to assign role/permission which has multiple checkboxes for assigning roles.

  10. Track Navigation: Checking this feature will track history of the navigation within the module and this navigational tracking can be seen using link of “Navigation log” at bottom left corner. It doesn’t allow to track each & every activity but module record(Enable/Disable) only.

Field Configuration Settings

Once all the settings are completed as explained above, user can move on to Field related Configuration Settings.

General field settings and particular field related settings are explained in detail below:

At the top of the above screen, highlighted fields are called Display Fields which can be configured in many ways. All display types have different color codes to easily identify them. You can assign any field to this color code status. Just select field & click on that particular link for color code.

  1. Display In All: This option is to be used if you want to show field in all sections - List , grid , print , query
  2. Grid Only: This is to be selected if you want to show field in Grid section only.
  3. View Only: This will show the field in detailed view.
  4. Print Only : This will show the field in Print section only, neither in Grid nor View.
  5. Query Only : This option to be chosen if you want to use field in query parameters section only.

Let's move on to top right highlighted two settings in above image.

Common Properties

If you have more than one fields which have common settings, then you can save settings of those fields at the same time. There is no need to do each setting for each field separately. Just select fields & click on “Common Properties” link

Let's understand with below example where you have “first name” & “last name”fields. Both should have almost same settings, then you can use this option as shown in below screenshot to set common properties and save the time.

Here , you can see “Right Panel” where you can save settings for both fields at a time. You can view all properties described in detail of the right panel in this same doc.

Formatter Function

If you want to format a field then Formatter Function can be used. Following are the steps to set the function:

  1. Write formatter function's definition from Formatter Function link.
  2. From Setting icon → Settings (right panel) → Check this ‘formatter required’ checkbox as shown in below screenshot.
  3. Provide function name of formatter into textbox and Save the settings,

Once you are familiar with top settings, let's continue with Table Field Section.

Table Field Section

Select Table Fields :

  1. Main Table, Alias and its fields :You can see Main Table & its table fields. It will show you Table Alias besides of each Table name.
  2. Relation Table, Alias and its fields :Clicking on the Relation Table name will make the Relational table & its table fields visible for detailed view. It will show you Table Alias besides of Table name.

    For example :

    • user_details (ud) // Alias is ud
    • login_details (ld) // Alias is ld

    If you want to show field in listing page, then just click on “+” sign. It will be added in your listing page at right side. If you want to remove it from listing then click on “-” sign. At right side, you can see field listing , those fields are to be displayed on your listing at Admin Panel.

  3. Custom Fields :If you want to add any static field or want to do any custom query then you can use this field. This is explained in detail below in Custom Fields section.

Display Fields

  1. Label :It will show you Column Title which you can see at Admin listing page. If you want to modify it then you can do it.
  2. Query :This will show you field name which will be used in all queries. If you want to edit it then you can do it.
  3. Alias :It will display you alias name . If you want to modify it then you can do it.
  4. Sorting :It will allow the user to use this specific field in sorting at Admin listing page. If you uncheck the checkbox, it will remove sorting feature for this field. By default, all the fields are marked for Sorting. User can configure them as per the customized requirement.
  5. Searching :It will allow to use this specific field in searching at Admin listing page. If you uncheck the checkbox, it will remove searching feature for this field. By default, all the fields are marked for Searching. Generally all the fields are not necessary for searching so User can configure them as per the requirement.
  6. Width :It will allow to set width (in pixels) of specific field in Admin listing page. If you set width using dragging feature from listing page then width value will be added in this field.
  7. Align :It will allow to set alignment of specific field in Admin listing page. Available alignments are Left , Center , Right

Custom Fields

In addition to the regular fields of the main table and relation table, if you want to add any custom field to show extra information to the user, Custom field can be added and configured.

This can be either a static with field with information for display purpose only or custom query based field to display some calculation or combination of 2 fields.

When you click on “Custom fields”, field will be added at right side as shown in below screenshot. You can select field type over there. This will show you 2 field types:

  1. Text
  2. Query

Field Type : Text

Let's understand each Field type with example as many a time requirement will arise for custom fields. Requirement / Objective : If you want to show link “View Products” in category listing & it will redirect to its product module & show listing.

Configurations: Displayed in below screenshot and explained step-wise below:

  1. Just select “Custom Field” & it will be added in listing field.
  2. Now select field type “Text”.
  3. Now enter your Column title , Display in query (for this, it is static link label)
  4. Click on setting icon of that field & it will show you right panel for extra settings.
  5. Select “Edit Link” & it will show you 2 options:
    • Self : If you don’t want to redirect to another module & want to use current module only, then you can use this option. It will allow to edit that specific record only for same module.
    • Custom - Link Settings : If you want to redirect to another module, then you can use this option. Once you select the Custom option, Settings link will be visible. Before moving on to Custom Link Settings, you need to save the custom Field.
  6. Click on “ Setting” link & it will show you popup.

Module Block

  1. Module / Custom ? : Select type if its Module or Custom.

    • Module : If you want to redirect user to another module then select it.
      • Module Name : Select module name on which you want to redirect.
      • Module Page : On which page you want to redirect : Listing, Add or Update
      • Open Page : How do you want to open page : In New Page, In Same Page or in Popup
    • Custom : If you want to add any internal / external link then you can use it. If this is selected then below screen will be displayed.
      • Custom Module Link : You can enter External Link, Internal Link and Project Module Link. Click on Information icon (i) to get more examples.
      • Open Page : How do you want to open page : In New Page, In Same Page or in Popup

If any condition is to be applied in Link Block, then check it. Condition Type can be either AND /OR.

Condition Block

Operand :

This is the field/data on which operation is to be made. It will allow you to set different types of operands as explained below:

  1. Variables (Table fields) : It will populate the list of table fields to choose from.
  2. Static value : Enter static value.
  3. Request Parameters : Examples can be status, project_name, category_name
  4. Session variable : Examples are like iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus
  5. System defined variable : Some examples are COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION
  6. Server defined variables : Some examples are REMOTE_ADDR, HTTP_HOST
  7. Function : below is the general instructions for parameter type function:

    If your function is "General defined" function then it should be declared in following

    path

      >application

        >libraries

    Function structure should be as below:

    function phpFunctionName($dataArr=array(), $id='') {

    // do your code

    // return your modified "$value"

    }

  8. Operand 1 : Select First operand for condition
  9. Operand Value 1 : Depending upon the selection of operand 1, it will populate either dropdown or textbox for value.
  10. Type : Variable type can be anything from Integer, String, Float, Date, Date & Time, Time.
  11. Operator : Select the operator for comparison from a long list of Great Than, is equal to, equal to etc.
  12. Operand 2 : Select 2nd operand for condition
  13. Operand Value 2: Depending upon the selection of operand 1, it will populate either dropdown or textbox for value.

Extra Parameters

There can be Extra Parameters to set apart from the standard parameters. All extra parameters are explained below

  1. Request Variable : Request variable type can be Operand to be selected from the available list (Operands are explained in detail above).
  2. Static/Variable : You need to select Variable type from the given list of variables like Static, Variable, Session, Request, Server, System and Function (Explained above in detail). According your selection, you need to set value in “Listing Field”.
  3. Listing Value : This will be list of table fields populated in drop down to be selected from as value.

Admin Side Preview: Shows configuration of Product listing (Field Type = Text):

When you click on “View Products” , it will redirect to product listing page & it will show products of specific category not all products. Shown below is product listing page

Field Type : Query

When user wants to show the result of a query as a field, Field Type should be used as Query instead of Text. Enter the query and it will show the result in Admin Side.

Let's understand with example:

If you want to show “Count Of Products” on Category listing page then we can do it using Query type.

Enter the Query : select count(*) from product where iCategoryid = c.iCategoryid

Admin side Listing Preview :

Here you can see the number of products per category as highlighted.

Right Side Shortcut for each field :

  1. Sort Fields - You can set order of fields by drag & drop feature
  2. Setting - It will show you panel at the right side from where you can manage field wise extra settings. Please refer to Settings section below for more details.
  3. Delete - This will delete the specific field from listing

Settings

Clicking on Settings icon on the right side of each field will open panel on right side from where user can manage all field related extra settings. This section is divided into 3 parts:

  1. Custom Field Settings
  2. Settings
  3. Search Summary

Check out the explanation below:

Custom Field Settings:

  1. Field Type : This can be either Text or Query.
  2. Display Name : It will show Column Title which will be displayed at listing page.
  3. PHP Function : It will show you “PHP Defined” & “General Defined” function list (Functions will be autocompleted).
    • If your function is "PHP defined" function then it will perform operation on fetched data.
    • If your function is "System defined" function then you can see that function code in "Utiltity" → "Function List" Section.
    • If your function is "General defined" function then it should be declared in following path
      application
      >libraries
      >general.php
      File as like below
      function phpFunctionName($value='',$id='',$dataArr=array()){
      // Write your code
      // Return your modified "$value"}

Settings:

Various tiny but important settings can be done here.

  1. Default Sorting? : It will allow you to set default sorting (ASC / DESC) for specific field. Checking the checkbox will show below screen to select from Ascending and Descending.

  2. Sorting? :It will allow you to sort (ASC / DESC) for specific field. You can Enable/Disable sorting at listing page. By default it’s Enabled.
  3. Searching? :It will allow you to search for specific field. You can Enable/Disable searching at listing page. By default it’s Enabled.
  4. Width :It will allow you to set column width in pixels. If you set column width by dragging column at admin side , that value will be saved automatically over here.
  5. Alignment :It will allow you to set alignment of column value as Left, Center or Right.
  6. Display In :It will allow you to select where you want to show specific field. All , Grid Only , View Only , Print Only , Query Only (we have discussed these earlier).
  7. Edit Link :It will allow you to add “edit link” in listing page.Explained in detail above.
  8. Hide Column? :It will allow you to hide specific column field in listing page. It will also allow you to show/hide column only if the condition applied is fulfilled. You can add condition here on-click on “Hide Setting” link.

    For example :if you want to show Price column only if admin is logged in not for users. So you can check condition through session variable here.

  9. Add to Bulk Mail? :It will allow you to select specific field for bulk email. (We have discussed it earlier). For example : In user module , there are so many fields in module but do not want to use all fields. You just need Email field then you can select specific field from here.
  10. Add to Push Notify? :This will allow you to add a field for Push Notification. Selected field will be available in the drop down list when you need to send Push Notification. To add the field for Push Notification, you must have added the module to push notification.
  11. Group Summary? :This will be used when you use “Grouping Records” property & display listing Group-wise. Enabling this feature will add “Group summary” for grouped records.

    It allows you to show group summary. When you check this , you will see configuration box as shown below.

    • Group Operations :It will show you different types of operations such as Count, Sum, Average, Max and Min
    • Group Text :You can define Group text label/ title with its format. Summary text of the Group can be one good example of Group Text.

      Format : Label (Text), Beginning of Separator , {0} - means it will be your value(Customized value or calculated value) , end separation

      For Example :We are going to show user listing grouped by Gender. Now if we want to show average age of each gender then following configuration should be done.

    Data Grouping Settings of Group Text

    Group Summary configuration of “Age Field”

    Now, we will see listing at Admin panel in below screenshot . It will show you Gender - Wise Grouping and Average age of each group (Male / Female).

  12. Image File? :It will allow you to show image thumbnail in listing. If are using any image/file & want to show image thumbnail then you have to check this property otherwise it will show image name only as shown in below screenshot.

    Now, Let's check this field property and screen will have below extra Image/File related settings to be done.

    • Inline :If Inline is checked only then thumb image will be shown in listing otherwise it will show you “view” link, Onclick of this you will see image in popup.

    • File Server :It will allow you to select file server type from 3 options as below:
      • Local :It uses its own server
      • Custom :If you want to use other server
      • Amazone :if you want to use amazon s3 bucket
    • Folder Name :You can specify folder name which is used for images. This folder name must be same in “Add/update form” also that we will see later.
    • Folder (ID Wise) :You need to select unique field (Primary key) to differentiate image per category.
    • Image Width :It will allow you to define the width of the image to be shown.
    • Image Height :It will allow you to define the height of the image.
    • Image Tooltip on Hover :If you want to show tooltip to help user, select Yes otherwise default is No.

    See below screen in which we have done configuration to view thumbnail in category listing

    Admin listing page :

  13. Expand Row? :This option is used to show expanded detailed information by expanding the row for specific column. It is same as “Expand Grid View” & “Expand Detail View” feature that we have discussed earlier. When you select this property , it will show you below screen where you need to select the module and do related settings as shown in below screenshot.

  14. Formatter Required? :Check this option if you want to format a field then follow below rules (We have discussed it earlier)
    • Write formatter function's definition from Formatter Function link.
    • From Setting icon → Settings (right panel) → Check this ‘formatter required’ checkbox.
    • Provide function name of formatter into textbox.
  15. Search Configuration? Checking this option will present you with below listed screenshot where you need to select the Type of the field and related values from the available list / enter value.

Search Summary

Add / Update Form Configuration

To make the customized application, Add/Update forms are as important as Listing pages. Let's learn how to configure Add/Update form

The Add/Update form is divided into two parts:

  1. Module Level Settings
  2. Field Level Settings

Module Level Settings

Beginning with module level settings, let's understand each field in detail from the below screenshot. It shows primary key of the module you have defined while creating new module in the top right corner of below screen.

  1. In line Editable : Checking this option will allow you to give online inline editing facility to user so while seeing the details of the record, if user wish to edit them, he can with inline editing. Below are 2 screens to show the difference when the inline editing is not provided and provided.

    When inline editing is NOT checked

    After inline editing is enabled

  2. Unique Field : Unique field is used to prevent duplicate entries. It allows you to set multiple Unique Fields for specific module with "AND" / "OR". Let's take one example. If you want to set unique field validation for more than one field. Please check either "AND" or "OR" .
    • "AND" is used for all unique fields data matching in the table.Eg: vUsername = 'demo' AND vEmail = 'demo@demo.com'
    • "OR" is used for either of unique fields data matching in the table. Eg: vUsername = 'demo' OR vEmail = 'demo@demo.com'
  3. Switch To : It allows you to switch to different records in update form only. You don’t need to go on listing page and select another record to update. You can manage it in update form and save the time. You just need to select fields you want to display as “Switch To”.

    Here are two examples of Single Switch To field and Multiple Switch To fields : In the Country module, there are lots of country records. If you want to give feature of Switch to so user can update records one by one from the same screen then need to do following configurations:

    It will reflect in the Update form as shown in below screen

    If you select Multiple fields in Switch To field then check below configurations.

    See at Admin update form , you will see “Country field with country code”.

  4. Before Form Save Function : It allows you to execute number of action events before Form is saved. This can be implemented before particular event (Add / Update / Both). User just need to define function name. As user starts with the function name, autocomplete feature can be a help.

    It gives 3 options to choose from, about when to activate this event.

    • Both :For both add/Update action.
    • Add :For Add action only.
    • Update :For Update action only.

    Here is the example to send email notification before adding category with category name. Let's create PHP Function for sending mail notification for category

    Define this function name at before Form Save property and select one of the three options as per your requirement. I.e Here it's for both Add & Update.

    Now when you add category, this action will be executed & notification will be sent before adding category. User will get notification email.

    Define this function name at After Form Save property.

    Now when you add category, this action will be executed afterwards & notification mail will be sent after category is added. User will get notification mail.

  5. After Form Save Function : This is almost same as above mentioned “Before Form Save Function”. The only difference is that this function will be executed After Form Save instead of Before in former.

    Let's continue with the same example :

    If you want to send mail notification after adding category with category name. Create PHP Function to send email notification for category.

  6. Before Delete Function :It allows to execute any function Before Delete function is executed. Select the General Function or API functions from the drop down list or you can always add new function to apply custom functionality. Start with the letter in the Function textbox and it will show list to autocomplete.

    Here is an example how to call this function.

    If user wants to Send notification mail when category is deleted with category name then let's create PHP Function for sending mail notification Before Delete event is applied.

    Define the function name in below screen and if there is any parameter applicable then it will ask for as shown in below example.

  7. After Delete Function : Almost same as above. The difference is it will be executed after Delete query will execute.
  8. Detail View : It allows you to add detailed view on top of the Add/Update Page. It is for showing single detailed view. This is specially useful when you want to show information of the related module. We have seen same feature for listing page.

    Let's understand with the example of Country and State modules.

    If you have “State” module & on its add/update form, you want to show its country details on top of the page. Then you can show using this property with following settings.

    Select module that you want to relate with your current module. Then, just give foreign key relation. Extra condition is applicable for “where” Condition. (Syntax we have defined earlier / Check help text).

    • HTML Layout : It will allow you to change HTML layout. When you click on “Details” link, it will show you page where you can change layout. If you want to remove any field then you can remove it from html. It will reflect on Admin side.
    • Allow Editing : This is applicable only for generated admin panel not for engine. It will allow you to edit records. By default, this option is not activated.
    • Print :This is applicable only for generated admin panel not for engine. It will allow you to print records.

    Here is the Admin side preview of how it looks after above configurations.

  9. Relation Modules : It allows you to create relations between parent module & child module. It allows you to add multiple child module relations and show it in different ways.

    • Select modules for relation.
    • Define relation using Foreign key.
    • Give Extra condition (Applicable if you want to give Where condition).
    • Delete : Check if you want child records to be deleted when parent is deleted
    • Add New : Check if you want to show “Add more” button for adding records.
    • Popup : Check if you want to show popup to add record.
    • Display Tab : Checking this option will show relation module in different Tab in Add/Update form. If it is selected then layout options will be disabled.
    • Layout :Select from the list of 3 types of views (Applicable when Tab is disabled)
      • Tab View
      • Table View
      • Block View
    • Print : Check if you want to allow user to print records (applicable for generated code only).

    Let's understand with the example of Category and Products. These can be related modules as products must be added under category. So while adding either Category or Product there should be facility where user can add data of the other too.

    Here are examples of 3 Different Views (i.e. Tab View, Block View and Table View) with Admin Preview to give you better idea.

    Tab View : It shows related module in adjacent tab as shown in below screenshot.

    Block View : Here you can see block view & you can see related products with CRUD operations.

    Table View : Here related module can be shown as table.

    Add New Category & its Related New Products

  10. Form Layout Template : Select the layout of the add/update form. There can be many options available to choose from as per your requirement.

    Let's understand one by one with the preview to get better idea:

    • Standard :It is default view which is just a single column view.
    • Split View : Here the screen is splited in 2 parts as shown in below screenshot.

    • Blocks View : Screen will be divided in blocks.

    • Custom View : It allows you to create customized layout of the form. You can add different blocks, you can add upto 3 columns in each block & also add the Tabs.

    • 2 Columns View : By Default, it provides 2 column view.

    • 3 Columns View : It provides 3 column view as shown below.

  11. Custom JS : It allows you to add your own custom Js files.

    How to add JS in Add/Update form ? Let's see with step by step process and example.

    If you want to call JS onClick of any button/link in Add/Update form, then you can do it by calling function. Just take any custom field & call php function from setting.

    Here is the screen showing “Create PHP Function”

    Now, add custom field and define PHP function name which is defined in previous step

    Now, add JS & define function which is called onClick of button/link.

    Now, Go to add/update form. It’s done.

  12. Custom CSS : It allows user to add his own custom CSS files for Add/Update form. Clicking on “Add CSS File” will redirect the user on following form.

    Multiple CSS files can be added too. Check “Additional CSS Req?” which will allow you to upload/write next CSS file.

Field Level Settings

Once module level configurations are completed, certainly, user may need some field level settings to customize them. Below Module level settings, it will list all the fields of the table attached with the current module where user can do field level settings.

Let's have a glance at common icons or buttons on this screen such as below listed:

  1. Form Settings : How the form should look like can be configured from Form Template Settings. Below is the form to do form related settings.

    • Apply Default Settings : If you want to quickly configure a form, this is the easiest settings. All the default settings will be applied.
    • Row View : User have to choose from Single Row and Double Rows.
    • Bordered Rows : If you want to keep the rows bordered or not.
    • Label Alignment : All the labels on the forms should be left aligned or right aligned.
    • Show Title Bar : If you want to display Title bar or not. If yes, write down the Title Bar.
    • Show Actions Button Bar : If you want to show action buttons bar with buttons Save, Close, Add etc. then select Yes otherwise No.
    • Action Button Alignment : Select the alignment of Action Buttons from Left, Centre or Right.
    • Show Action Controls : If you want to show action controls or not.
  2. Copy Settings : It allows you to copy field settings from one field to another specific field. You can copy settings from specific field to multiple fields too. Just select fields which you want to copy to. It also allows you to select which settings you want to copy.

  3. Common Settings : If you want to set common settings of multiple fields together to save the time then you can apply settings at same time using this option. No need to do one by one for each field.

  4. Show details : It will show you Table name & field name.

  5. Field Identification with Color : You can recognize field by color code if it is Hidden/Static/Relation/Custom/Module Field.

  6. Mark as Hidden : Select the field which you want to make as Hidden. It will be saved in database but won't be shown in listing.

  7. Form Buttons : Default option is Disable so it won’t show any buttons on Form. If user choose to show buttons on the form for different actions like Save, Discard, Update, close etc then set it to “Enabled” as shown in below screenshot.

    By default there are fixed number of pre-defined buttons but if user has special requirements then he can add new button any time by clicking on “+Add New”.

    • For Record Add : Default buttons are Save and Discard.
    • For Record Edit : Default buttons are Update, Delete and Discard.
    • Add New Button : It will add new button beside default buttons and clicking on it will open settings where user can make new button related settings as below:
      • Title, Text and icon : write down the Title and Text to be shown on the newly added button. Icon file name should be written too.
      • Confirm Dialog : If the new button is to be used for Confirmation, this option will be best suited. Put down what should be shown on click of the button like below:
        • Title of the dialog box :By default it Confirm, user can edit it to make it more meaningful
        • Popup Body :What will the popup body contain? It can be anything from Simple Text, General Function and General Class Method. Write the text and you are done!
        • Submit Action :Once submitted, which action should be taken, should be mentioned here. Available options can be General Function, API and Extended Class Method.
        • Size of the dialog :Default size is 300 X 150. User can alter it as per requirement.
      • Module : If on click of the button, new module is to be opened then this option should be chosen.
        • Module :Select the module name from the available module list
        • Mode :Choose the module from Listing, Add, Update, View and Print
        • ID Param :Write down ID parameter
        • Parameters :Add as many parameters as you want with name and value.
        • Open Page :Where you want to open this page. Select from options like In Same Page, In New Page, In Pop-up.
      • URL Redirection : If you want to redirect the user to any URL on click of the button then, choose this option.
        • URL :Write down full URL for redirection.
        • Mode :Choose the module from Listing, Add, Update, View and Print
        • ID Param :Write down ID parameter
        • Parameters :Add as many parameters as you want with name and value.
        • Open Page :Where you want to open this page. Select from options like In Same Page, In New Page, In Pop-up.
      • JS Callback : If any JS is to be called on Click of the button, write down function name.
  8. Conditional Code : Default option is Disabled. You can Show/Hide specific fields based on condition. It allows you to add multiple fields for condition and also you can add multiple conditions. Just check this property and add condition settings.

    • Condition Field
      • Choose the condition from AND / OR
      • Select the field name
    • Condition : Opt for condition from different conditions available
    • Value : Enter value to compare
    • Show/hide fields : Select which fields you want to show and which to hide if the condition is true.
    • Action : Delete the previously added condition

    Let's take with one example:

    If you have enum field “Options” with image & video value, you want to show image field when image is selected and show video url when video is selected.

    Let’s see the effects on Admin Side:

  9. Add Custom Field : It allows you to add new custom field to fulfill your customized requirements. After adding , update settings and then you can see settings icon for custom field where you can apply your tailored settings (we will discuss settings later).
  10. Add Static Field : It allows you to add static field in your Add/Update form. If you want to show label in Add/Update form , then you can do it using this property.

    If we want to show heading “CATEGORY DETAILS” on category Add/Update form then you can add Static field as shown in below screenshot:

    After adding static field, just click on “Update “button so you will see “Setting icon” for static field. It allows you to change order sequence of static field by Drag & Drop.

    In setting panel of static field , you can see different properties as below:

    • Show Input On : If you want to display this field on Add / Update form OR both.
    • Unique Name : Shows you unique name of the static field & will allow to modify it too.
    • HTML Content : Place to add your HTML Content.

    After saving static field setting , you will see “Pink” color code as we have discussed earlier for Static field.

    See the effect on Admin Panel:

Field Specific Settings (Setting Panel)

When you are finished with all the common settings for all fields, its turn to move on to field specific settings. Click on the Settings icon against each field and it will open Field Wise Setting on the right side of the screen as shown in below screenshot.

As the type of field will vary, field wise settings will also get divided into General Settings and dynamic settings based on selected Type.

Let's begin with “General Common Settings” and then we can move on to settings which are changed based on TYPE.

Common Settings

  1. DB Field : It will show you Table name with Field name as per the database.
  2. Unique Name : It will show you Unique Name of specific field. If you want to modify it then it allows to do.
  3. Display Name : It allows you to change display name of fields which will be shown in Add/Update form.
  4. Type : It provides different field types. You can select one best suited for your field. It will show different settings based on selected type. Types can be Textbox, Textarea, Password, Radio buttons and some others.
  5. Validations : This drop down of common validations will also be populated based on the field type selected above. There is no need to add separate validations for field as Configure.IT provides you with almost all common built-in validations. Just select and it will be applied automatically! It allows you to select multiple validations for each field. If you want to set your own validation message then you can do it .

    Let's see how it works :

    Different types of Validations are Requires, Email, Number, Zip Code, IP Address, Min-Max Range, Min-Max Length, Date, Digits, URL, Alpha with space, Alpha Num with space, Alpha without space, Alpha Num without space, Date greater than, Date less than, Date equal to, Date greater equal, Date less equal etc.

    Now if you want to validate field for “Email” then just need to select validations for Required & Email as shown in below screenshot.

Miscellaneous Settings

  1. PHP Functions : It provides you to add default PHP Functions OR you can use your own custom functions here. Autocomplete option is always there for all the Functions.
  2. Function Returns : choose from what the function will return. There are three options described below:

    • Value Only : It will apply only on the selected value of input. Let's take one example if for description field , you want to add default description using function so we have created “add_default_desc” function and return value is “This is our new & latest category” as shown in below screenshot.

      This will look as shown below at Admin side:

    • Whole Input : It will expect the whole HTML content as input. It will replace whole input with return value. Let’s continue with the same example of description field, if you want to add default description using function then you will have to create “add_default_desc” function and return value is “This is our new & latest category”.

      See the Admin side preview:

      • Field Status : Opposite to the above explained, if you desire to check field status of input only then there can be three options :
        • 0 for Hide
        • 1 for Shows
        • 2 for View Only
  3. Show Input On : It allows you to show input field on Add / Update / Both or as Hidden field.
  4. View Only (In Update) : If you are willing to keep any field for “View Only” purpose and doesn’t want user to edit it then Select “Yes”. It will be deactivate the field and it will be shown greyed. Default option is “No”.

    Example: While editing category information, if you want category name intact & do not want to allow to edit it then use this option as shown below:

  5. Default Value and Default Value Type : It allows you define Default value for specific field based on Default Value Type you have selected.

    Let's take one example to understand how the whole process works:

    If you want to set current date for added-date field , then you can use “NOW()” function as default value and type will be MySQL.

    See the effect at the Admin side:

    It allows you to set Default Value using different Default Value Type.

    • Text : considered as normal text
      • Example: Active, No

    • SQL Entry : considered as MySQL query
      • Example: SELECT iAdminId FROM `admin` WHERE iAdminId = "{%REQUEST.admin_id%}" LIMIT 1

    • Function : considered as MySQL query
      • Example: CURDATE(), NOW()

    • Request : considered as Request variables
      • Example: GET, POST

    • Server : considered as Server defined variables
      • Example: REMOTE_ADDR, HTTP_HOST

    • Session : considered as Session variable
      • Example: iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus

    • System : considered as System defined variable
      • Examples: COMPANY_ADDRESS, COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION

        Let's understand with example:

        If you want to merge firstname with lastname for User, then you should check the Merge Fields Checkbox and “Settings” link will be visible, which will redirect the user on below screen.

  6. Merge Fields : It allows you to merge two or more fields. You can merge maximum 4 fields. It allows you to change size of fields and see preview before rolling.

    Let's understand with example:

    If you want to merge firstname with lastname for User, then you should check the Merge Fields Checkbox and “Settings” link will be visible, which will redirect the user on below screen.

    Here is the Admin side preview:

  7. Attributes List : It allows to add extra HTML attribute with type. Attributes should be declared with respect to field property type

    For example : readonly , class , Inline CSS , Onchange , Onclick , id , title , tabindex

    Example-1 :

    • Attribute : style
    • Value : width:250px;margin:5px;

    Example-2 :

    • Attribute : class
    • Value : input-small

    Detailed Example :

    If you don’t want to allow change price for other user and make it readonly,

    This is how it will look at Admin Panel:

Settings based on field types

  1. Standard Fields
  2. Special Fields

Standard Fields

  1. Textbox : It will show you different settings based on “Textbox” type. It allows you to set size, background color, Max Length , Encrypt Data etc settings as shown in below screen.

    Some Settings are self explanatory whereas little complex fields are described below:

    • Input Text Case : Uppercase , Lowercase , UCFirst , UCWord.
    • Apply Input Prefix/Suffix : It allows you to add Prefix/Suffix.
    • Example :
      • Prefix can be Rs , $ etc.
      • Suffix can be Kg , .00 etc.

    • Text Placeholder : allow to add default Placeholder text in textbox. It will always be visible in Textbox till we enter new text.
    • Field Comments : allow to add Help Text (Tooltip).
  2. Textarea : It will show you different settings based on “Textarea” type. It allows you to set size, background color, Max Length , Encrypt Data, Placeholder Text , Field Comments , Input Case , Max Count.

    Input Length can be any from below listed:

    • No limit
    • Words (Number of words)
    • Characters (Number of Characters)
    • Password : It will show you different settings based on “Password” type. It allows you to set password pattern , Re-type password in form , Encrypt password, Placeholder Text , Field Comments.

  3. Password : It will show you different settings based on “Password” type. It allows you to set password pattern , Re-type password in form , Encrypt password, Placeholder Text , Field Comments.

  4. Radio Buttons : It will show you different settings based on “Radio buttons” type. It allows you to add field comments, set formatting type etc as shown in below screenshot.

    Some uncommon settings are explained below:

    • Formatting type : It shows you predefined option list with its default value. Here are some examples:
      • Gender (Male/Female)
      • Status (Active / Inactive)
      • Currency
      • Languages
      • Yes / No
      • Enum

    • Available Table List : It allows you to populate data from specific table based on its key . Check below Example where user wants to show “Category Name” as option list from category table,

      Admin Side Preview

      Note : For “Parent - Child” property → See “Dropdown” type for more explanation.

    • Custom PHP function : It allows you to populate data using Custom PHP function. See “Dropdown” type for more explanation.
  5. Checkboxes : It will show you different settings based on “Checkboxes” type. You will see same properties of “Radio button” that we have discussed. The only difference is Radio button allows to select just SINGLE option from the available list whereas Checkbox allows you to choose MULTIPLE options at the same time.

    Checkboxes for different currencies are set in below screen.

    Here is the admin Admin Side Preview of Checkbox :

  6. Dropdown : only the default value will be shown. Rest all value, will be available in list, which can be accessible from the available list. It allows you to populate data using available options, tables, views or Custom PHP functions.

    Some uncommon properties are explained below:

    • Option Lists / Contents: Which kind of data and from where to be populated can be decided from here.
      • Available option : It is already explained above in checkbox. Selecting this option will populate default options available for that option.
      • Available Table List : It will show you list of tables to be chosen from. Select the table and specify related Key Field, Value Field, Where Condition, Group By Condition and Order By. Choose Autocomplete, if you want user to just write few characters and then it will autocomplete the option from dropdown.
      • Available View List : It will display the list of Views, if there is any. Select the table and specify related Key Field, Value Field, Where Condition, Group By Condition and Order By. Choose Autocomplete, if you want user to just write few characters and then it will autocomplete the option from dropdown.
      • Custom PHP Functions : User can create customized function catering to his requirement. Here is the generalized syntax of the PHP function.

        function dropdownFunctionName($value='',$mode='',

        $iId='',$dataArr=array()){

        // do your code

        // if your dropdown is normal then

        // return your array like

        array(

          array("Id" => "1", "Val" => "Option-1"),

          array("Id" => "2", "Val" => "Option-2")

        );

        // if your dropdown is opt group type then

        // return your array like

        array(

          array("Id" => "1", "Val" => "Option-1","grpVal" => "Group-1"),

          array("Id" => "2", "Val" => "Option-1","grpVal" => "Group-1"),

          array("Id" => "3", "Val" => "Option-2","grpVal" => "Group-2"),

          array("Id" => "4", "Val" => "Option-2","grpVal" => "Group-2"),

         );

        }

        OPT Group and Parent Source will be explained below in detail.

      • Add New Record Facility : If you want to facilitate user to add new record of other related module on the same page, then select the related module.

        Example is always is easy to understand with. If you want to add new product in category which doesn’t exist in category module then there is no need to go to Category module & add category. You can add new category in Product module only.

        So select category module and it will show you icon to add new record of category.

      • Add New Record in Popup : It allows you to add new record in Popup / New tab. Default option is No which means it will be opened in New tab for new record add. If the option “Yes” is selected, when the user will select to add new record, it will open the popup window.
      • Default Required : If any default record is required or not. If “Yes” option is selected, and there is no record selected, it will show message like “Please select….” and in case of “No” option, first record will be displayed as default record. This is shown in above image and the effect can be seen in below screenshots:

      • Default Placeholder Text : This shows default placeholder text. This can be either be blank or any customized message can be displayed.
      • Field Comments : You can write up comments for the field, if there is any. Its optional.
      • Container CSS class : If you want to apply any CSS class, write its name.
      • OPT Group : It allows you to show values in dropdown based on selected field in OPT - Group so basically it’s used for categorized dropdown based on the field you select.

        Let’s understand with an example.

        If you want to show categories on the basis of its status (Active / Inactive), below configuration settings should be done and next image will show the preview of Admin Panel.

        Configuration Settings:

        Admin Panel Preview:

        • Parent - Child : It allows you to show Parent field with its child field in drop down. It permits to show N-Level children.

          Here is the example for better understanding.

          If you want to manage category & its sub categories within one category master table and you want to show categories and its subcategories in dropdown , then you can do it.

          Configuration settings

          Admin side preview

        • Parent Source : This option is used when you want to populate list of dropdown fields dynamically on the basis of selection of earlier dropdown(Parent).

          Let’s have a look at one quick example where in 1st dropdown, you have list of countries and in next dropdown, you want to populate states of only selected country from 1st dropdown. Following settings should be done.

          This is how it will look at Admin Panel.

        • Parent Source : This option is used when you want to populate list of dropdown fields dynamically on the basis of selection of earlier dropdown(Parent).

          Let’s have a look at one quick example where in 1st dropdown, you have list of countries and in next dropdown, you want to populate states of only selected country from 1st dropdown. Following settings should be done.

          This is how it will look at Admin Panel.

  7. Multi-select Dropdown : It's almost same as Dropdown with all the properties. In multi-select dropdown, two or more fields can be shown at the same time as shown in below screenshot.

    Multi-Select dropdown will allow user to select more than one options from the list and it will look as below at Admin Panel.

  8. Date : It will show you different settings based on “Date” type. It permits to set different date format , Enable /Disable date dropdown , set size , add field comments and set placeholder text as shown in below screenshot:

    Let's understand one unique property of Date type:

    Default Value, +0::+0::+0 represents today.

    For example,

    • 1::+1::+7 represents one year, one month and seven days from today.
    • -1::1::7 represents last one year, one month and seven days from today.

  9. Date & Time : It will show you different settings based on “Date and Time” type. It allows you to set different date and time format , Enable /Disable date-time dropdown , set size , add field comments , set placeholder text , Maximum/Minimum date limit (as we have discussed above).

  10. Time : It allows you to set different time format , Enable /Disable time dropdown , set size , add field comments , set placeholder text as shown in below screenshot.

Special Fields

  1. File : This type is used to upload any file like image, video etc. You just need to define file type (extensions) over there. It allows you to select file server (Local , Amazon , Custom) and Folder Name. Even you can create new folder, if you want. If the Server type is Amazon, you don’t need to provide folder name.

    Just remember to keep the folder name same as on Listing page.

    It also provides the feature of capturing image (through webcam) instead of uploading image. You can specify maximum file size , Permitted file type (Extensions) , height , width of Image etc.

    Here is the screenshot showing how all the settings are to be done.

    Below screenshot shows you how configurations will look in Admin Control Panel.

  2. Phone Number : It will show you different settings based on “Phone Number” type. It allows you to set size, encrypt data and field comments.

    Here are various Phone Number Formats:

    • (999) 999-9999
    • +40 999 999 999
    • a*-999-a999

    Please note :

    • a - Represents only alphabets (A-Z,a-z)
    • 9 - Represents only numbers (0-9)
    • * - Represents an alphanumeric character (A-Z,a-z,0-9)

  3. Autocomplete : If you want to facilitate user with autocomplete feature for any field then Configure.IT provides you as in-built one.

    Check how you need to configure it in following screenshot:

    This is how the Admin Control Panel preview will look:

  4. Color Picker: Color Picker : Searching for perfect color have never been easier without Color Picker. This shows you all the configurations regarding Color Picker Type. It allows you to set size, max length, allow color preview or not. It is particularly more useful when you want to set color at Admin Side.

    Here, we present an example so you can understand how to set different Background color (BG) for each category.

    Admin side preview

    Note : we have used “Customized BG color - color settings” in listing form but we have skipped “Color code = variable”. Now see below,

    In color settings , we can use variable “color” that we have defined here and based on this color variable , BG color will be reflected at admin side.

    For example : We have set “Color” field in category module. Now , when status is Active/ Inactive, use BG color which is defined for each category.

  5. Rating Master : If your proposed application needs to display Rating for products or places, Configure.IT customized type Rating Master would be useful. It allows you to set Ratings in your form. You can set numbers of stars , size of stars , types of start (Bulb / Star) , allow half star rating or not etc options for clear rating.

    Admin side preview

  6. Code / Markup Field : It is just syntax highlighter. It allows you to add CSS / HTML / Javascript / XML code. As you can see in below image, it shows dynamic properties like Markup Type, Size, Height and Container Class CSS.

    Code / Mark up Type can be any from CSS, HTML, Javascript, XML. Size is to be chosen from Tiny, Small, Medium, Large and Full Width. Height can be set from Tiny, Small, Medium and Large.

  7. WYSIWYG : To write customized script or code, user can always have option add editor - WYSIWYG. It allows you to set size, height , add field comments , toolbar (Basic / Advanced) , resizing of toolbar.

    You can use this type of field for descriptive fields like Address, Notes, Release Notes etc.

    Admin side preview

  8. Google Maps :It allows you to add Google Map and set Map height and size. You just need to map fields for Latitude and Longitude.

    Admin Side Preview

Messages

All the messages displayed on different occasions in any module for various conditions, can be configured using this section.

Configure.IT has divided all the messages into 4 sections for easy access as shown below:

  • Permissions
  • Records
  • Callback Events
  • File Uploads

Permissions

Admin can provide different permissions to different users based on their role in management of the application. Users can have all the rights like List, View, Add, Edit and delete or can have some only. When user tries to access the section which is not permitted to him, he will get “Failure Message”. You can customize them and add your own tailored message.

Records

When new record is added, edited or deleted, duplicate record found or record not found, various messages should be displayed to let the user know. There can be either Failure Message or Success Message which can be managed from this section.

Callback Events

There will be messages to display in case of failure before, after and at the time of deletion of the Callback event.

File Uploads

While uploading a file, we’ll need to display different messages to make the user aware about the process as well as progress. Both Failure and success messages can be managed from this section.