Sample datatable in XPages
Step 1: Create a new Xpage(say 'DataTable' as the xpage name).
Step 2: In the xpage, create a pannel and name it as 'DataPannel'. Inside the create a DataTable as shown in the outline part of the image.
Step 3: Now select the pannel and define a data source. Select the pannel(Its easy to use outline to select) --> In the properties tab, click on the Data --> click on the Add button and select Domino View as shown in the below sreenshot.
Step 4: It will open the datasource properies. From the data source properies choose a database(as default current database) and select a view as its data source as shown in the screen shot. And give the data source name as “DS_EmpView”. It will be added in the data source list.
Step 5: Now select the data table and assign the data source. Select the data source which we have defined “DS_EmpView” and give the collection name as “Coll_EmpView”. Collection name is very important for data table. Only from the collection, we are going to display data.
Note: The following view is the view which we are going to display the data in datatable .(Refer the below screen shot)
Step 6: In the 1st row of the datatable, create 2 labels in each column called “Employee Details” and “Contact Details” and make them bold. In the datatable the 1st row is considered as header.
Step 7: Now right click on the 1st column and select Insert column. It will insert a column. In the 2nd row of the datatable, insert an image in the 1st column, add 3 computed fields and add 2 computed fields in the 3rd column as shown in the below screen shot. (Refer the outline for the order that how the controls are placed).
Step 8: Select the 1st computed field and go to the value tab of its properties. Then select the collection “Coll_EmpView” as its data source and bind to any of the column as listed(say 'Name'). Follow the same step and bind all the computed fields to any one of the column in the view.
Step 9: Then build the application and preview it in notes client/browser. The result will be displayed as shown in the below screen shot.
Note : All the view documents will be displayed in the datatable. If there are more documents we can use the pager contro in the Display tab of the data table properties. We can also able insert a table inside the data table column and we as supply a rich UI to the data table.
Step 10: You can also add a label infront of the computed field and show the detailed Employee Info. The final out put was shown below.
Note : In data table collection name is very important. Dont bind the values from the view data source, allways bind the data to the collection name.
Step 1: Create a new Xpage(say 'DataTable' as the xpage name).
Step 2: In the xpage, create a pannel and name it as 'DataPannel'. Inside the create a DataTable as shown in the outline part of the image.
Step 3: Now select the pannel and define a data source. Select the pannel(Its easy to use outline to select) --> In the properties tab, click on the Data --> click on the Add button and select Domino View as shown in the below sreenshot.
Step 4: It will open the datasource properies. From the data source properies choose a database(as default current database) and select a view as its data source as shown in the screen shot. And give the data source name as “DS_EmpView”. It will be added in the data source list.
Step 5: Now select the data table and assign the data source. Select the data source which we have defined “DS_EmpView” and give the collection name as “Coll_EmpView”. Collection name is very important for data table. Only from the collection, we are going to display data.
Note: The following view is the view which we are going to display the data in datatable .(Refer the below screen shot)
Step 6: In the 1st row of the datatable, create 2 labels in each column called “Employee Details” and “Contact Details” and make them bold. In the datatable the 1st row is considered as header.
Step 7: Now right click on the 1st column and select Insert column. It will insert a column. In the 2nd row of the datatable, insert an image in the 1st column, add 3 computed fields and add 2 computed fields in the 3rd column as shown in the below screen shot. (Refer the outline for the order that how the controls are placed).
Step 8: Select the 1st computed field and go to the value tab of its properties. Then select the collection “Coll_EmpView” as its data source and bind to any of the column as listed(say 'Name'). Follow the same step and bind all the computed fields to any one of the column in the view.
Step 9: Then build the application and preview it in notes client/browser. The result will be displayed as shown in the below screen shot.
Note : All the view documents will be displayed in the datatable. If there are more documents we can use the pager contro in the Display tab of the data table properties. We can also able insert a table inside the data table column and we as supply a rich UI to the data table.
Step 10: You can also add a label infront of the computed field and show the detailed Employee Info. The final out put was shown below.
Note : In data table collection name is very important. Dont bind the values from the view data source, allways bind the data to the collection name.
No comments:
Post a Comment