We will use the popover to display the list of employees of a particular department using the Sample HRDB Database.
Import Sample HRDB and in the Query Editor write two queries - one to obtain Employee count for a given department and one for Employee Picurl.
Select count(*) from EMPLOYEE where EMPLOYEE.DEPTID = :deptid
Select EMPLOYEE.PICURL from EMPLOYEE where EMPLOYEE.DEPTID = :deptid
Create a popover page and select a blank template.
- Set the content source property to the partial and the content as popover page created in the previous step and bind the badge value to the Emp_Count value. Content defines the page to be displayed when the popover link is clicked and badge indicates the number of items that will be displayed in the content.
- We have added a select widget for the user to select the department for which they want to see the employee list. Drag and drop a select widget and bind it to Department Dataset. Set the display field to name, and data field to deptid.
- Be sure you bind the data field of both the query variables to the select widget datavalue, and set the Auto Update to true.
Run the application and see the menu in action.
Repeat the steps 2 till 3 from above.
- Set the content source property to be inline
- Set the content as follows, we have used the list HTML from the partial page created in steps 2,3,4
<wm-livelist listclass="media-list" itemclass="media" template="true" dataset="bind:Variables.HrdbExecuteEmpPic.dataSet" name="livelist1"> <wm-listtemplate layout="media" name="listtemplate1"> <wm-container class="media-left media-top" paddingleft="15" name="container1"> <wm-picture picturesource="bind:Variables.HrdbExecuteEmpPic.dataSet.PICURL" name="Picture" class="media-object"></wm-picture> </wm-container> </wm-listtemplate> </wm-livelist>
Content can be any HTML code or URL to another page.
- Run and see the results.