How to start with NF Tool

Introduction

In this article, we learn how to implement CRUD operations using Nebula Framework Tool with Adventure Works Project Examples. This article shows you step by step how to create CRUD operations using Nebula Framework Tool.

To design a page in Cadebill Cloud, you need to first get the work done in Nebula Framework (NF) tool.

As per the nature of that page, the work that need to be done NF Tool will be either very simple or little complex.

All or most of the settings that what need to be applied to a field that is get rendered in the UI page is done using the NF tool.

By this unnecessary code is avoided in the UI and have it simple.

AT the top level is “Entity”. A normal simple page can be done using only one entity. Whereas complex pages which get data from several places, will be using more than one entity.

Each of the Entity, will be having one or more Entity Methods.

At the Entity Method level, you need to specify what will be database operation that the method going to perform and from where it will get the data for that page.

Data source for that Entity Method could be taken from Table, SQL query, SP/Function or DLL method.

And that Entity Method will perform any one of the C R U D E operation.

C = Create operation

R = Read operation

U = Update operation

D = Delete operation

E = Execute operation

For each of the Entity Method, you need to have one or more Request / Response Tables.

Using this Request table, values are get passed to that Entity Method, using the fields that are available for that Request table.

Using the Response table, values are get returned from that Entity Method, using the fields that are available for the Response table. And this will be get displayed in the UI as grid, form, Etc.,

 Create Operation:

Normally for a Create operation of an Entity Method, there will a request table and one or more field. These fields will be used for the insert. That insert can be directly done at that SQL table, by specifying the method type as Table and providing that SQL table name in “Target Method Source”. The fields that are in that SQL table need to be used as the fields for that Request Table.

If the Create operation involve more than one SQL table, then it should be done by using a SP. In the “Target Method Source”, that SP name should be specified. Parameters that are in that SP need to be specified as fields for that Request table.

Read Operation:

Normally for a Read operation of an Entity Method, there will be a Request Table and one or more Response tables. If the read operation is done without any condition, then there will not be need of Request Table.

Read operation could be either done directly on SQL table or from the output of the SQL SP / Function or using SQL query. The parameters that are in that SP / function / SQL query need to set fields for that Request table.

There should be one Response Table for each result set from the output of this Read operation. If there are 3 result sets from that Read operation, then there should be 3 Response tables and each of that Response table should have the fields that are there in the output of the Read operation.

Update Operation:

Normally for an Update Operation, that Entity Method will have one Request Table, with fields that are used to pass the data for the Update Operation.

Delete Operation:

Normally for a Delete Operation, that Entity Method will have one Request Table, with the primary key field(s) used as field for that Request table.

Execute Operation:

Execute operation can be used to perform any advance level of operations like, command buttons, execute DLL methods Etc., These methods will have one Request table and one or more Response table as per the data that is sent to the method and data what get returned from it.

All the above activities need to be done first using SQL Management studio: for creating tables, SPs, Functions and our own NF Tool.

If the intended operation is to perform a normal insert/update/delete/read on a SQL Table, this could be completed using 2 Entity methods. One to perform Read operation on that table and another method to perform Create, Update and Delete operation in that table.

Steps to be followed: -

• Create table in database
• In NF Tool, use Entity initializer to create Entities along with methods, tables and fields for the various CRUD operations.
• Publish Nebula Framework.
• Create HTML File in Project.
• Create Menu under Module and Menus.
• Create Lookup and assign to Field.
• Add Codes in html file to page CRUD works.

Step 1: Create table in database

Server: DBSERVER5

Database: AW_Cloud_V32

Create an Common.student_details table in SQL database as in the following.

create table common.student_details

( 

   student_id int identity (1,1) Primary Key, 

   student_name varchar(256) not null, 

   student_dob date, 

   student_age int,

   department_id smallint not null,

   student_address varchar(max)

)   

Create an common.student_department table and add the data for Student Department drop-down list (Lookup) in SQL database as in the following.

create table common.student_department

(

department_id smallint identity(1,1) primary key,

department_name varchar(30) not null

)

insert into Common.student_department values ('Computer Science')

insert into Common.student_departmsent values ('Biology')

insert into Common.student_department values ('commerce')

Step 2: In NF Tool, use Entity initializer to create Entities along with methods, tables and fields for the various CRUD operations

Under AdventureWorks Entities menu, click Entity Initializer tab and fill the NF objects (Entity, Methods and Table) details as the per the Standards we have followed in NF Tool as in the following,

After clicking “Create Entity” button from Entity Initializer page, given entity objects will be added into Nebula Framework Tool such as:

Figure 1: Entity

Figure 2: Methods, Tables and Fields.

Step 3: Publish Nebula Framework

All the changes that are made in the entities, with the NF tools, will not be seen in the application, until developer publishes the entities to the application database.

The changes done, initially will be got saved in the Entities database. Using this Publish option, it will be get copied to the application (target) database.

Step 4: Create HTML File in Project

Now let us create the html file named StudentDetails.html by right clicking on EFApproaches folder as in the following screenshot:

Note: It is not mandatory that html file should be in EFApproaches folder, it is just for readability you can create this html file anywhere in the solution explorer.  This can be done by creating different folder name or without folder.

Step 5: Create Menu under Module and Menus

Entities – AdventureWorks Entities

URL - https://web1.mclsystems.com/AWv32/#/Home

Menu Path – Application Setting -> Modules and Menus -> Menus

Now let us create Menu to view the html content in UI as the following screenshot:

Note: After added new menu, developer should Refresh the URL.

Output in UI

Step 6: Create Lookup and assign to Field

Step 7:Add Codes in html file to page CRUD works

Add the basic codes in StudentDetails.html to page CRUD Works as in below,

<div id="StudentDetailsPanel"></div>

<script type="text/javascript">

    (function () {

        var dataSourceConfig = {

            requestEntities: ["StudentDetails"],

        };

        var groupEntity = new MCL.GroupEntity(Object.assign(dataSourceConfig, { container: container })).done(function (groupEntity) {

            $("#StudentDetailsPanel").MCL_DemandAccordion({

                controlName: "StudentDetailsPanel",

                groupEntity: groupEntity,

                items: [{

                    controlName: "StudentDetailsPane",

                    title: "Student Details",

                    expanded: true,

                    items: [{

                        groupEntity: groupEntity,

                        itemType: MCL.Controls.ItemType.Search,

                        controlName: "StudentDetails_Search",

                        entityName: "StudentDetails",

                        methodName: "StudentDetailsRead",

                        tableName: "StudentDetails",

                        targetControls: "StudentDetails_grid",

                    },

                    {

                        groupEntity: groupEntity,

                        itemType: MCL.Controls.ItemType.Grid,

                        controlName: "StudentDetails_grid",

                        selectable: { mode: "row" },

                        schema: {

                            entityName: "StudentDetails",

                            tableName: "StudentDetails",

                            read: { methodName: "StudentDetailsRead" },

                            submit: { methodName: "StudentDetailsCreateUpdateDelete" },

                            editable: {

                                addRecord: true, editRecord: true, deleteRecord: true, mode: MCL.Controls.Grid.EditMode.FormPopup,

                            },

                        },

                        formConfig: {

                            controlName: "StudentDetails_form",

                            CreateAutoGnerateGroup: true,

                            items: [{

                                itemType: MCL.Controls.ItemType.AutoGenerate, colCount: [1, 1, 1, 1], itemcolCount: [1, 1, 2, 2], title: "Student Details",

                            }]

                    },

                        columnConfig: []

                    }],

                }],

            });

        });

    }());

</script>

Once we write the codes in html, then save the changes and run the project in browser (recommended chrome). while run the project VS shows "Debugging Not enabled" window as in the following,

Be sure you were run with “Run Without Debugging”, then click Ok. After login go to menu

EF Approaches ->Student Details, Here the output there is no data in database, that’s why it’s shows empty.

Now, you can able to do the CRUD operations in that page.