1. Requirement

2. Use Case

3. Steps to Follow

3.1. Create Form

1. Create a form with the following details to add task details.
   

   Form	Form Link Name	Field Type	Field Name	Field Link Name
   Add Task	Add_Task	Single Line	Task Name	Task_Name
   		Multi Line	Description	Description
   		Drop_Down pascal@zylker.com edwardjenner@zylker.com nikola@zylker.com	Assign To	Assign_To
   		Radio High Medium Low	Priority	Priority
   		Drop_Down In Progress Completed On Hold Open	Status	Status

3.2. Create Dashboard

Note: The following steps outline the process of designing a dashboard that aligns with our specific use case. Feel free to customize your own dashboard to suit the unique requirements of your use case.

1. Create a page named 'Dashboard.'
   
2. Add the below mentioned page variables to the page. These variables will be used in the page elements to display dynamic values
   

   Variable Name	Data Type
   inProgress	int
   open	int
   completed	int
   highPriority	int
   dashboardType	string
   searchQuery	string

   
   
   
3. Drag and drop a panel into the page.
   
   
   
   
4. Replace the existing panel elements with a text element, Set the display value as ${dashboardType} to dynamically showcase the specific dashboard type
   
5. Add two buttons in the panel with the label Team Dashboard and My Dashboard.
   
   
6. Configure the Action for buttons as shown below. On configuring, when the buttons are clicked, the page refreshes with the respective query parameters.
   

   Action	Team Dashboard	My Dashboard
   Action type	Open Page	Open Page
   Page	Dashboard	Dashboard
   Query parameters	dashboardType=Team Dashboard	dashboardType=My Dashboard
   Open in	Same window	Same window

   
   
7. Include four more panels to the page to show the count of the tasks with respect to the status and add a text header into the panel as shown below.
   
   
8. Configure each panel's Display settings for the header as shown below.
   

   Display	Panel 1	Panel 2	Panel 3	Panel 4
   Display data	Page Variables	Page Variables	Page Variables	Page Variables
   Select Variable	inProgress	open	completed	highPriority
   Show variable as	Actual	Actual	Actual	Actual
   Units	None	None	None	None
   Format	1,234,567	1,234,567	1,234,567	1,234,567

   
   
9. Add a sub header for each panel to show the status information. Configure the subheader's Display settings as shown below.
   

   Display	Panel 1	Panel 2	Panel 3	Panel 4
   Display data	Text	Text	Text	Text
   Value	In-Progress	Open	Completed	High Priority

   
   
10. Arrange the panels as shown below.
    
    
11. Embed the report of the Add Task form below the panels in the page in our case the report name is All Tasks. In the upcoming step, a filter will be applied to this report to display tasks related to the logged-in user.
    
    
12. Set filter for the embedded report by clicking Filter in the configuration page of report element.
    
    
13. Click Add filter and enter the below details to filter report based on the value supplied to the searchQuery page variable. The value for the searchQuery page variable will be supplied through page script in the following steps.
    

    Filter	Select Field	Select Operator	Enter Value
    	Assign To	Contains	input.searchQuery

3.3. Add Page Script

1. Navigate to the page script and enter the below script to your page.

1. // Fetch the task information related to the logged-in user and supply it to the page variables.
2. input.inProgress = Add_Task[Status == "In Progress" && Assign_to == zoho.loginuserid].count();
3. input.open = Add_Task[Status == "Open" && Assign_to == zoho.loginuserid].count();
4. input.completed = Add_Task[Status == "Completed" && Assign_to == zoho.loginuserid].count();
5. input.highPriority = Add_Task[Priority == "High" && Assign_to == zoho.loginuserid].count();
6. //Filter the report to display tasks assigned to the logged-in user.
7. input.searchQuery = zoho.loginuserid;
8. 
   
9. //Fetch task information of all team members when the user clicks the Team Dashboard button on the dashboard, Conversely, load the default page when the user selects My Dashboard.
10. 
    
11. //The report filter page variable 'searchQuery' is intentionally set to an empty string, ensuring that the report remains unfiltered and loads all records.
12. if(input.dashboardType == "Team Dashboard")
13. {
14.  input.inProgress = Add_Task[Status == "In Progress"].count();
15.  input.open = Add_Task[Status == "Open"].count();
16.  input.completed = Add_Task[Status == "Completed"].count();
17.  input.highPriority = Add_Task[Priority == "High"].count();
18.  input.searchQuery = "";
19. }
20. else
21. {
22.  input.dashboardType = "My Dashboard";
23. }

4. See How It Works

5. Related Topics

1. Page script and variables
   
2. Add and manage page elements