Building a Sample

Problem: Saving employee data say empId, empName, empAddress, empSal into database under employee table (tbl_Employee) and display the saved results in a table format and perform update, delete operations too.

Solution:

Step 1 – UI Creation:

Create UI from Presentation Metadata by extending any of the base UI elements say common.baseDataEntryUI or common.baseUI (based on your requirement). On creation of UI we will get elements of that UI like Default, Content Form etc. in the UI structure in the left pane and in the right pane its General properties, variable declarations and function declarations which will be used to perform our operations.

From presentation User Interface, create vertical/horizontal layouts under default/content form (developer choice). But if we create our forms and all under content data form we have to specify those details under Default too. We can also create new forms under that UI structure and link those forms to default/content UI (we have an option in right pane to select the custom forms).

After creating layout, create a From under to it. All these can be done by doing a right click on the required objects and choosing our elements.  After creation of form, we can add the require elements like empId, empName, empAddress, empSal as text fields, Save, Cancel as a buttons.  After creation of elements in the right pane we will get all the attributes that those elements contain. Here we can specify name, display label, data we wanted to display to that field (saved data), text data max size, type of data allowed, operation on that particular fields like onClick methods, run trigger on selection of any field, onBlur events, editable or not, visible permissions, any dynamic label, tooltip, label/field alignment etc.

One important point here is, we will be saving all our data and retrieve the data with use of Document (Document creation will be explained in below section) which will perform validations too on the fields.

Step2 – Document Creation:

We can create documents under data dictionaries and create variables under to it to store those into database and if required to retrieve the data too.  After creation of new document we will be getting General, Variables and Methods tabs in right pane.

In this example we have to create variables as empId, empName, empDesignation, empSal for storing purpose and I wanted to get empDesignation a dropdown which I will get values dynamically using custom datatype (custom datatype creation is already discussed on earlier post under Conceptwave Metadata). 

Suppose if we wanted to impose some validations on empName then from Variables tab, click on that empName variable and at the bottom we have an option to add method to a variable say my method name is validateEmpName where we can perform all our checks and we can define our customized error message to if the conditions are not satisfied which we can display as page level validation message and error icon beside to that particular text field.

We can map this document to database table using mapping configuration under Database tab in the right pane.  So on calling this save method on this document (empDoc.save()) all the field values will be saved under tbl_Employee table.

We can also retrieve on load of page values too from the document. And these variables will be referred in UI layer like empDoc.empId, empDoc.empName etc.

Step 3 – Custom Datatype Creation:

As we have opted empDesignation to get dynamically refreshed, we use finder to fetch the results and can create the empDesignation data type as explained in Conceptwave Metadata post.

Step 4 – Finder Creation:

We have to create a finder (can go with SQL/Script finders as per the developer choice) from the metadata objects. After creation of finder we have to specify input and output documents too and we will have result Form view inbuilt to display the results after saving the information to tbl_Employee table.