Features
The CMS provides functionalities to easily perform a search, sort, join tables, create the dashboard, perform operations such as add, edit, delete, view details, export, etc easily. It also provides functionalities include js and CSS files, data display options like ‘order by’ and ‘where’ and perform validation of ‘required’, ’email’, ’URL’ and ‘number’. Cms also provides the option to define breadcrumbs, prefix, postfix, header, etc.
- DashBoard
- Settings
- Sections
- Search
- Sort
- External Columns
- Operations
- SubSections
- Manage Settings, Manage Groups, Manage Sections
- Edit Options
- Validation
- Custom Actions
- Including Files
- Admin Management
- Custom Configurations
- Export CSV file
- Combine Tables
- Custom Header Links
- Reports
DashBoard
The dashboard can be created easily created by writing as simple configuration. CMS provides functionalities to display graphs and tables. The 'listingPanel' is used to define the data to be displayed in table form on the dashboard. The 'graphPanel' is used to define the graph to be displayed on the dashboard. Dashboard graph has option to specify graph width, height, caption , x-axis name, y-axis name color etc..
Sample link is :
http://localhost/bbf/cms?section=users&action=showDetails#127
Sample dashboard configuration :
{
"dashboardPanel": "true",
"listingPanel": "true",
"listinPanelRow": "2",
"listingPanel1": {
"columns": "1",
"column1": {
"title": "Recent Sales",
"titlelink": "View All",
"titlelinkSection": "Admin::getRecentSalesLink",
"fetchValue": "admin::getRecentSales",
"listcolumns": {
"order_id": {
"name": "Reference"
},
"username": {
"name": "User"
},
"order_amount": {
"name": "Amount"
},
"order_date": {
"name": "Date"
}
}
}
},
"listingPanel2": {
"columns": "2",
"column1": {
"title": "Top Products",
"fetchValue": "admin::getMaxSoldProduct",
"listcolumns": {
"product_name": {
"name": "Product"
},
"storecount": {
"name": "Store Front Sale "
},
"mpcount": {
"name": "MarketPlace Sale"
},
"nwcount": {
"name": "Network Sale"
}
}
},
"column2": {
"title": "Top Stores",
"fetchValue": "admin::getMaxSoldStore",
"listcolumns": {
"store_name": {
"name": "Store Name"
},
"storecount": {
"name": "Market Place Sale"
},
"mpcount": {
"name": "Store Front Sale"
},
"nwcount": {
"name": "Network Sale"
}
}
}
},
"aggregatePanel": "true",
"aggregatePanelRow": "4",
"aggregatePanel1":
{
"columns": "1",
"column1":
{
"title": "Customers",
"titleicon": "users",
"boxcolor": "green",
"titlelink": "View All",
"titlelinkSection": "Cmshelper::getUsersLink",
"fetchValue": "Cmshelper::getTotalUsers"
}
},
"aggregatePanel2":
{
"columns": "1",
"column1":
{
"title": "Business",
"titleicon": "shopping-cart",
"boxcolor": "red",
"titlelink": "View All",
"titlelinkSection": "Cmshelper::getBusinessLink",
"fetchValue": "Cmshelper::getTotalBusiness"
}
},
"graphPanel": "true",
"graphpanelRow": "1",
"graphPanel1": {
"columns": "1",
"graph1": {
"type": "MSCombiDY2D",
"caption": "Sales",
"xAxisName": "",
"yAxisName": "Sale",
"width": "470",
"height": "300",
"dataSetsCount": "2",
"dataSets": {
"dataset1": {
"name": "Store",
"color": "#D3AC4F",
"fetchValue": "Admin::getFBSalesCount",
"renderAs": "Line"
},
"dataset2": {
"name": "Marketplace",
"color": "#59595B",
"fetchValue": "Admin::getMPSalesCount",
"renderAs": "Line",
"parentYAxis": "S"
}
}
}
}
}
' listinPanelRow' is used to define the number of rows for the listing panel and 'graphpanelRow' is used to define the number of rows for the graph panel. 'graphPanel(rowcount)' defines graph panel for the graph panel number (rowcount). 'listinPanel(rowcount)' defines listing panel for the listing panel number (rowcount). 'column' is used to specify the number of columns in the panel.
Sample Dashboard View:
Cms supports diffirent types of charts like MSCombiDY2D, MSLine, etc. The colors used in the graph should be given as hexcode. Pie chart can also be displayed on the dashboard.
Settings
The settings section can be created easily using simple configuration. The details to be displayed in the settings section are taken directly from the table specified. The values are also stored in the table. The table should have field names settingfield, value, settinglabel, groupLabel, type, parent_settingfield and display_order. The field names of settingfield, value can have different field names, and the field name maping must be specified in the configuration in 'fieldAssignment'. The fields groupLabel, type, parent_settingfield and display_order must have the same name.
Sample settings configuration :
{
"siteSettings": "true",
"settingStyle": "tab",
"fieldList": [
"nLookUp_Id",
"settingfield",
"value",
"settinglabel",
"groupLabel",
"helptext",
"type",
"parent_settingfield",
"display_order"
],
"fieldAssignment": {
"settingfield": "settingfield",
"value": "value"
}
}
Sections
Sections can be created by writing configuration for the table for that section in manage sections under a group.
Section can be viewed depending on the cms user privileges. If the user does not have the privilege to access the section, then Illegal access error message is displayed.
Sample section configuration :
{
"keyColumn": "id",
"detailHeaderColumnPrefix": "Student: ",
"breadCrumbColumn": "name",
"wildsearch": "true",
"detailHeaderColumns": [
"name"
],
"orderBy": {
"id": "ASC"
},
"listColumns": [
"name",
"roll_no"
],
"showColumns": [
"id",
"name"
],
"detailColumns": [
"id",
"name"
],
"columns": {
"id": {
"name": "ID",
"sortable": "true",
"editoptions": {
"type": "hidden"
}
},
"name": {
"name": "Student Name",
"searchable": "true",
"sortable": "true",
"editoptions": {
"type": "textbox",
"label": " Name",
"class": "textbox",
"validations": [
"required"
]
}
}
},
"opertations": [
"add",
"view",
"edit",
"delete"
]
}
Search
Searching can be performed easily using “searchable” : “true” in the column definition of the field of the table. Wild search can be performed using “wildsearch” : “true” in section configuration.
Eg:
"columns": {
"name": {
"name": "Student Name",
"searchable": "true",
"sortable": "true",
"editoptions": {
"type": "textbox",
"label": " Name",
"class": "textbox",
"validations": [
"required"
]
}
}
},
Sort
Sorting can be performed easily using “sortable” : “true” in the column definition of the field of the table.
Eg:
"columns": {
"name": {
"name": "Student Name",
"searchable": "true",
"sortable": "true",
"editoptions": {
"type": "textbox",
"label": " Name",
"class": "textbox",
"validations": [
"required"
]
}
}
},
External Columns
The external columns option is used to display data by joining two tables using foreign key.
Eg:
“columns”: {
“column name” : {
“external” : “true”,
“externalOptions” : {
“externalTable” : “table name”,
“externalColumn”: “field name”,
“externalShowColumn” : “display field”
}
}
},
Operations
CMS provides functionalities to perform basic operations like add, edit,delete, custom delete and view details. It also allows to perform custom operations. Operations are specified using “operations” keyword. Custom operations can be performed using “customOperations” keyword. Custom operations can be performed on multiple records together using “multiselectActions” keyword.
Eg:
"opertations": [
"add",
"view",
"edit",
"customdelete"
],
"customDeleteOperation": "Cmshelper::deleteUser",
"operationLabel": {
"addLabel": "Add Record",
"editTitle": "Edit",
"viewTitle": "View",
"deleteTitle": "Delete"
},
"multiselectActions": {
"delete": {
"name": "Delete",
"actionOperationSource": "Cmshelper::deleteMultipleUser",
"class": "icon-trash",
"title": "Delete"
}
},
"customOperations": {
"Configure": {
"options": {
"name": "Edit",
"linkSource": "Cmshelper: : showForm",
"class": "edit_lead_form",
"title": "EditLeadForm"
}
}
}
The 'addLabel' in 'operationLabel' is used to specify the label for the add button for the section. The default label is 'Add
In custom operations,
"customOperations":
{
"operation_name":
{
"options":
{
"name": "operation_name_label",
"linkSource": "Cmshelper::operationActionUrl",
"class": "operation_name_style_class",
"title": "operation_name_title",
“target” : “newtab”
}
}
}
The 'name' is the text/label displayed for the operation link. The function in 'linkSource' returns the url to the page where the operation is performed. The 'title' is the title displayed for the operation link. If ' “target” : “newtab” ' is given, then the page specified in the 'linkSource' will open in new tab. If the page specified in the 'linkSource' need to opened in the same tab then target need not be defined.
In multiselect custom operations,
"multiselectActions": {
"operation_name": {
"name": "operation_name_label",
"actionOperationSource": "Cmshelper::operationActionUrl",
"class": "operation_name_style_class",
"title": "operation_name_title"
}
},
The function in 'actionOperationSource' performs the operation.
The class should be defined in 'app.css' file or can be a class already defined (like bootstap class). Make sure the style does not conflict with the other styles as app.css in included in all pages(front end & cms) by default by the framework.
Sample Style :
. operation_name_style_class
{
background: url("images/edit_form.png") no-repeat scroll 33% 50% rgba(0, 0, 0, 0);
color: transparent;
}
SubSections
Cms provides functionality to create sub sections for sections. This can be done using the ‘relations’ keyword.
Eg:
In section configuration:
“relations”: {
“section name” : {
“name” : “title”,
“section” : “section name”,
“child_table” : “table name”,
“parent_join_column” : “column name”,
“child_join_column” : “column name”
}
}
In sub-section configuration:
“reference” : {
“referenceTable” : “table_name”,
“referenceColumn” : “reference table key”,
“referenceTableForiegnKey” : “foreign key column”
}
Manage Settings, Manage Groups, Manage Sections
Manage Settings, Manage Groups are Manage Sections default sections in CMS. They can only be modified by users with developer or sadmin privileges. Manage Settings is used to manage the settings of the cms pages. Manage Groups is to manage groups. Manage Sections are used to manage sections. A section can be added under a group. There are options to set display order for sections and groups. Sections or groups can be given privileges.
Edit Options
Cms provides ‘editoptions’ keyword to specify the details of the column/fields to be used in case of edit/add operations. The ‘type’ keyword can have values textbox, textarea, select, checkbox, radio and hidden. Hints can be given using “hint” keyword. Dropdown box can be created by using “type” : “select”. Form fields that are supported are date picker, html editor, textarea, radio button, autocomplete, password, hidden field, disabled field etc. We can give placeholder, class, prehtml, posthtml, etc in form elements.
Eg:
“editoptions” :{
“type” : “textbox/select/checkbox”,
"placeholder": "example",
“validations”:[“required”],
“label”: “name shows in the form (add/edit)”
}
The dropdown can have values from an array or a function. In the case where dropdown gets values from a function, function should be specified and defined and it should be a static function.
Eg of dropdown :
"status": { "name": "Status",
"editoptions": { "type": "select",
"source": { "1": "Active","0": "Inactive" },
"source_type": "array",
"enumvalues": { "1": "Active", "0": "Deactive" }
},
"listoptions": {
"type": "button",
"customaction": "classname::function",
"enumvalues": { "1": "Active", "0": "In active" },
"buttonColors": { "1": "green", "0": "red" }
}
}
Eg of dropdown with data from a function :
"status": { "name": "Status",
"editoptions": {
"type": "select",
"source": "Cmshelper::getAllIndustryName",
"source_type": "function",
"label": "Parent Industry",
"defaulttext": "Nil",
"class": "select"
}
}|
To set/change the default text/label displayed in the select box, the 'defaultLabel' can be defined in the column definition of that field. If 'defaultLabel' is not defined, then 'Select' will be displayed as the default text/label in the select box.
Eg: File upload configuration
"user_photo1_id":
{
"name": "Profile Picture",
"external": "true",
"externalOptions":
{
"externalTable": "tbl_files",
"externalColumn": "file_id",
"externalShowColumn": "file_id"
},
"editoptions":
{
"type": "file",
"label": "Profile Picture",
"class": "file"
}
}
Eg: Tag type configuration or Auto-populate selecting
"conference_id":
{
"name": "Conference",
"searchable": "true",
"sortable": "true",
"customColumn": "true",
"customaction": "Cmshelper::fetchTagDetail",
"editoptions":
{
"type": "tags",
"tagDetails":
{
"autocompleteSource": "Cmshelper::fetchUserUrl",
"autocompleteMinChars": "1",
"placeholder": "Select tags...",
"prePopulateSource": "Cmshelper::fetchTagedUsers"
},
"hint": "Conference Name",
"label": "Tags",
"class": "textbox",
"validations": [
"required"
]
}
},
Validation
Cms provides the option to perform validation on required fields. Validations can be performed for ‘required’, ‘email’, ‘url’ and ‘number’. This can be done using the ‘validations’ keyword. This is given inside ‘editoptions’. keyword.
Eg:
“validations”:[“required”]
"validations": ["required", "email"]
"validations": ["required", "url"]
"validations": ["required", "number"]
Pattern for validation
Eg: Phone number validation
"phone":
{
"name": "Phone",
"editoptions":
{
"type": "textbox",
"hint": "Follow the format xxx-xxx-xxxx",
"pattern": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
"label": "Phone",
"class": "textbox",
"validations": ["required"]
}
},
Eg: Email validation
"email":
{
"name": "Email",
"searchable": "true",
"sortable": "true",
"editoptions":
{
"type": "textbox",
"pattern": "^[a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$",
"label": "Email",
"class": "textbox",
"validations": ["required", "email"]
}
},
Custom Actions
Cms provides the functionality to perform custom actions. Custom actions can be used to perform operation before or after add / edit / delete operation.
Eg:
"customActions": {
"beforeAddRecord" :"classname::function",
"afterAddRecord" :"classname::function",
"beforeEditRecord" :"classname::function",
"afterEditRecord" :"classname::function",
"beforeDeleteRecord":"classname::function",
"afterDeleteRecord" :"classname::function"
}
Including Files
Cms provides option to include js and css files. This can be done using “includeJsFiles” and “includeCssFiles” keyword.
Eg:
"includeJsFiles" :[ "student.js" ]
"includeCssFiles":[ "student.css" ]
Admin Management
Cms can be used to manage the admin side. It can be used to manage the content of the static pages of the project and also to manage the cms users, their roles and privileges and passwords. Meta Tag management and mail template management can be done using Cms.
Custom Configurations
Custom Configurations can be used to define custom columns and also to write custom pages.
Eg:
{
"customAction":"true",
"controller":"controller_name",
"method":"method_name",
"module":"module_name"
}
Export CSV file
CMS provides option to export data as CSV. This is done by defining the reports section.
Eg:
"report": {
"reportTitle": "Accounts",
"columns": [
"acc_id",
"name",
"ubscription_type",
"subscription_date",
"subscription_expire_date",
"plan",
"createdon" ],
"dateColumn": "createdon"
}
Combine Tables
CMS provides option to combine tables.Using combineTable, the fields of the joined table can be displayed and add/edit operations can be performed on this table along with the parent table. This is done by defining the combineTable section.
Eg:
"combineTables":
{
"table_name":{
"combineColumns" : ["field1","field2"],
"combineReferenceColumn":"reference_field",
"combineTableForiegnKey":"foriegn_key",
"isPrimaryKey":"true"
}
},
The fields mentioned 'combineColumns' should be mentioned in 'detailColumns' and defined in 'columns' and need not be mentioned in 'listColumns' and 'showColumns'.
Custom Header Links
The custom header links can be created easily created by writing as simple configuration. The link can redirect to a page or display the page as a popup.
In the cms_sections table entry, the section alias should be 'cms_layout' and table name should be none.
Sample header link configuration :
{
"headerLinks": {
"Link1": {
"title": "Link1",
"linkSource": "Cmshelper::getLink1Url"
},
"Link2": {
"title": "Link2",
"linkSource": "Cmshelper::getLink2PopupUrl",
"target": "popup"
}
}
}
In the above Eg:, Link1 redirects to the page/url returned by the function specified in 'linkSource' and Link2 displays the contents of the page/url returned by the function specified in 'linkSource' in a popup.
Reports
The reports section can be created easily using simple configuration. The reports configuration provides functionality to select the date range to be displayed [current week, current month, all, custom date range], export option and search & sort for required fields.
Sample report configuration :
{
"reportPanel": "true",
"reportTitle": "Detailed Report ",
"defaultDateRange": "weekly",
"dateRange": [
"weekly",
"monthly",
"custom"
],
"dateField": "ddate",
"dataSource": {
"queryFunction": "Cmshelper::getReportQuery",
"orderBy": {
"vtype": "='ticket' ",
"vtype": "='chat' ",
"vtype": "='other' ",
"vname": "ASC"
},
"groupBy": [
"nlog_id"
]
},
"export": "true",
"keyColumn": "nlog_id",
"listColumns": [
"vname",
"vtc_id",
"vTeamName",
"vstaff_name",
"vtype",
"vQuestion",
"vReplies",
"ddate",
"nTimeTaken"
],
"exportColumns": [
"vname",
"vtc_id",
"vTeamName",
"vstaff_name",
"vtype",
"vshift_name",
"vQuestion",
"vReplies",
"vadditional_info",
"vStatus",
"ddate",
"nTimeTaken"
],
"detailColumns": [
"vname",
"vtc_id",
"vTeamName",
"vstaff_name",
"vtype",
"vshift_name",
"vQuestion",
"vReplies",
"vadditional_info",
"vStatus",
"ddate",
"nTimeTaken"
],
"columns": {
"vname": {
"name": "Client",
"type": "text",
"sortable": "true",
"searchable": "searchable"
},
"vtc_id": {
"name": "Refence Number",
"type": "text",
"sortable": "true",
"searchable": "searchable"
},
"vstaff_name": {
"name": "Staff",
"type": "text",
"defaultText": "Admin",
"sortable": "true",
"searchable": "searchable"
},
"vTeamName": {
"name": "Team",
"type": "text",
"sortable": "true",
"searchable": "searchable"
},
"nTimeTaken": {
"name": "Time Taken",
"type": "text",
"postfix": " mins"
},displayFormat
"vQuestion": {
"name": "Question",
"type": "text"
},
"vReplies": {
"name": "Reply",
"type": "text"
},
"vadditional_info": {
"name": "Work Log",
"type": "text"
},
"vStatus": {
"name": "Status",
"type": "text"
},
"vtype": {
"name": "Type",
"type": "text",
"sortable": "true",
"searchable": "searchable"
},
"vshift_name": {
"name": "Shift",
"type": "text"
},
"ddate": {
"name": "Added On",
"type": "datetime",
"dbFormat": "datetime",
"displayFormat": "m/d/Y H:i a",
"sortable": "true"
}
}
}
Next
CMS API