Build an Activities Related List Tab¶

First Condition: WhatId = the id parameter in the page’s url.¶

First, we need to create a condition that will only pull in Tasks that are related to the main Opportunity record on the page.

4. Click on the new condition you created in Step 3.
5. Click on the field-picker button to bring up the Select Field window.
6. Select the WhatId (Opportunity/Account ID) from the Select Field window.

7. Click in the Value field.
8. Choose URL Parameter as the Content.
9. Enter Id as the Parameter.

Second Condition: Status != Completed¶

10. Select the 2nd condition under your OpenTasks Model.
11. Click on the Field-Picker Button to bring up the Select Fields window. Select the Status field.
12. Click on the Operator field. Choose != (is not equal to) from the Operator dropdown menu.

13. Click on the Value field.
14. Enter Completed as the value.

This Condition will only pull in conditions whose Status is not Completed. Or, stated differently, this Condition will only pull in conditions that are open.

Third Condition: IsClosed != true¶

The third and final condition we’ll create will keep this Model from pulling in tasks that are Closed.

15. Selet the third condition you created earlier.
16. Click on the Field-Picker button and select IsClosed from the Select Field window.

17. Click the Operator field and select != (is not) from the Operator dropdown menu.
18. Click the Value field and make sure that the Value checkbox is checked (true). Your condition automatically recognizes that the IsClosed field is checkbox and renders the Value as a corresponding checkbox. Easy and awesome!

First Condition: WhatId = the id parameter in the page’s url¶

4. Click on the first empty Condition you just created.
5. For the Field, use the field-picker to select the WhatId (Opportunity/Account ID).
6. Click on the Value field.
7. Choose URL Parameter from the Content dropdown menu.
8. Enter Id in the Parameter field.

This condition will only pull in Tasks that are associated with the main Opportunity record on the page.

Second Condition: IsClosed=True.¶

This condition will make the Model only pull in Closed Tasks.

9. Select the second Condition you created earlier.
10. For the Field value, use the field-picker to choose the IsClosed field.
11. Click Value and make sure that the checkbox next to Value is checked!

Set each Table to the appropriate Model.¶

4. Select the Table under the Open Tasks template.
5. In the Skuid Table Properties, choose OpenTasks as the Model.
6. Select the Table under the Completed Tasks template.
7. In the Skuid Table Properties, choose TaskHistory as the Model.

8. Click on the Add Field(s) button on the Table component under Open Tasks.
9. Click on Model Field(s).

10. Click on All Fields.

11. Click the Add field to model button to the Fields you want to add to your OpenTasks Table.

For this example, I have selected Subject, Contact/Lead ID, Priority, Status, Due Date Only, and Assigned To ID.

12. Step 11 adds the Fields to the Model, but doesn’t add them to the Table. Add these Fields to the Table by checking the box next to the Fields you added.

13. Repeat Substeps 8 -12 for the Table component under Completed Tasks.

For this example, I have selected the exact same Fields for each Model. You can change this up as you see fit.

Use Custom Labels to clean up Field Titles.¶

14. Assign a Custom Label to each Field that has an unhelpful or confusing Field label. Of course, you can leave the Field names as they are, but you can add clarity to your information by using Custom Labels for your Fields. Makes your Tables much easier to interpret!

For example, we changed:

• Contact/Lead ID to “Related To”
• Due Date Only to “Due Date” or “Date”
• Assigned To ID to “Assigned To.”

Copy and paste this snippet to Mark Tasks Completed.¶

We’ll include this JS resource in a custom row action on our table. It will mark the task on that row completed.

1. Click on your first new JS.
2. Choose In-Line as the resource location.
3. Name the snippet something like markCompleted.
4. Click to open the Inline Code editor and copy and paste the following Javascript into the editor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

skuid.snippet.registerSnippet('tasks.markCompleted',function(params){
   console.log('test');
   // Mark all selected items as closed,
   // then save our 2 Tasks models
   var model = params.model,
       list = params.list,
       selectedItems = params.item ? [params.item] : list.getSelectedItems();
   if (selectedItems.length === 1 && skuid.model.isNewId(selectedItems[0].row.Id)) {
       alert('Please finish creating this Task before marking it as completed.');
       return;
   }
   $j.each(selectedItems,function(i,item){
       model.updateRow(item.row,'Status','Completed');
   });
   // Block the list from having updates
   list.element.block({
       css: list.blockUICSS, overlayCSS: list.blockOverlayCSS,
       message:'Marking Tasks as Completed...'
   });
   var saveFinishes = model.save({callback:
       function(){
           var updateFinishes = skuid.model.updateData([model,skuid.model.getModel('TaskHistory')]);
           $j.when(updateFinishes).then(
               function(){ list.element.unblock(); },
               function(){ list.element.unblock(); }
           );
       }
   });
});

Click on your Open Tasks table and click Add Features, then Add Row Action.¶

We’ll be adding one Row Action to this table.

Make the row action a custom action called Mark Completed.¶

1. Click on the new row action.
2. Choose Custom as the action type.
3. Name the action Mark Completed.
4. Choose a helpful action icon, such as ui-silk-tick.
5. Enter the name of the markCompleted snippet: tasks.markCompleted (This is the registered name of the snippet in the code from Step 11).

Still in the Open Tasks Table, create a mass Mark Completed action.¶

1. Click on your Open Tasks Table.
2. Click Add Features and select Add Mass Action.
3. Click on the new action and make it a Custom action drawing on the tasks.markCompleted snippet, just like the row action from Step 12.

Click on the Completed Tasks Table and edit its properties.¶

We don’t want people to be able to add tasks right to the Completed Tasks table. Thanks to our “Mark Completed” custom actions, completed tasks will be added there automatically. We do want people to be able to log calls and emails in this table, but we’ll do that by creating some Global Actions later in this step.

1. Click on your Completed Tasks Table.
2. Deselect “Allow Inline Record Creation.”
3. You can also choose to deselect “Show Save/Cancel” and have just one Save/Cancel button for this page using a Button Set.

Click Add Features > Add Row Action¶

Select Popup for your Action Type.¶

1. For Action Type select Popup.
2. Label your action View Task Details.
3. To select the icon choose from the icon directory or type in ui-silk-comments.
4. Click on the button to select Configure popup and we will create your task detail page in the next step!

Configure your Popup.¶

1. Drag and drop the Field Editor into the popup page. Make sure you select the correct Model (Open Tasks in this case). You may want to also set the field editor as Read Only and uncheck Show Save/Cancel.
2. Now go to your model and select the appropriate fields (such as Subject, Description etc) and drag them into your field editor.

Success! You now have a Popup Row Action to view task details.¶

Click on the first global action and make it a “Log an Email” redirect action.¶

1. Click on the first global action.

2. Choose Redirect as the action type.

3. Name it Log an Email.

4. Include a helpful icon, such as ui-silk-email.

5. For the URL, enter the following, substituting the name of the primary model on this page for OpportunityData:

   /00T/e?title=Email%3A%20&what_id={{$Model.OpportunityData.data.0.Id15}}&tsk5=Email%3A%20&tsk10=Email&retURL=%2F{{$Param.id}}

Click on the second global action and make it a “Log a Call” redirect action.¶

1. Click on the second global action.

2. Choose Redirect as the action type.

3. Name it Log a Call.

4. Include a helpful icon, such as ui-silk-telephone.

5. For the URL, enter the following, substituting the name of the primary model on this page for OpportunityData:

   /00T/e?title=Call%3A%20&what_id={{$Model.OpportunityData.data.0.Id15}}&tsk5=Call%3A%20&tsk10=Call&retURL=%2F{{$Param.id}}

Name this a Calendar Tab.¶

1. Click on the new tab.
2. Name the new tab Calendar.
3. Add a helpful icon, such as ui-silk-calendar.

Click to add views to your calendar.¶

Click on a new View and select the Type from the list.¶

Add an Events Model to use as your Event Source.¶

1. Name your new model.
2. Set it to the Event object.
3. Click on the Advanced tab.
4. Order by ActivityDate DESC

Add relevant fields to your Events model.¶

Add a condition that will only pull in events related to the main record on the page.¶

1. Under Events, click Conditions > Add (+).
2. For Field, choose What Id (Opportunity or Account ID).
3. Click Value.
4. Choose Url parameter as the content and Id as the parameter.

This will ensure that this Events model only includes events that are related to the main record on the page.

Click on your New Event Source and set it to the Events Model.¶

1. In the Calendar, click on the New Event Source.
2. Set it to the Events model.
3. Select the appropriate fields, e.g. Subject for Name, Start Date Time for Start Field, End Date Time for End Field. (NB: For Start and End, you can use any Date Time field from any model).
4. For Grouping Field, choose WhoId to group the events by related Contact.(Optional): Enter an event template that will be displayed in the calendar.
5. (Optional): Choose an additional background color.

Add another Events model for this Event Source.¶

1. Click to Add Model.
2. Name your model OppOwner Events.
3. Select the Event object.
4. Include the appropriate fields.

Add a condition so that this Events model will pull in the calendar of the user viewing the page.¶

1. Click to add a condition.
2. For field, choose OwnerId.
3. Click Value, then select UserInfo of page viewer.

This condition will ensure that this model will pull in only events that are owned by the person viewing this page.

Edit Page ~ salesforce.com - Enterprise Edition¶

1. In the Calendar, click on the New Event Source.
2. Set it to the OppOwner Events model.
3. Select the appropriate fields, e.g. Subject for Name, Start Date Time for Start Field, End Date Time for End Field. (NB: For Start and End, you can use any Date Time field from any model).
4. For Grouping Field, choose WhoId to group the events by related Contact.
5. (Optional): Enter an event template that will be displayed in the calendar.
6. (Optional): Choose an additional background color.

For more information about the Calendar component, including the day-scheduling view feature, see the Calendar topic.

Choose the Opportunity you want to preview this page for.¶

The parent page we’re using for this Activities Tab is the Opportunity Detail page, so we have to choose an Opportunity to view this page for.

1. Choose Opportunity as the object type.
2. Start typing in the name of the opportunity and select it from the lookup list.
3. Click Go.

Click on the events tab to view your calendar.¶

1. Click on the Events tab.
2. Click and drag to add an event to your calendar.
3. A dialog will appear asking what type of event you want to create. From there, you can enter the event details.