function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jonathan Wolff 7Jonathan Wolff 7 

Change the Task Component to show the tasks of today and the next 7 days

Hi,
I want to build or change the existing Todays-Tasks-Component so it shows the tasks of today and the following 7 days. I dont want the users to have to make clicks to see these tasks. Can you give me a guide to achive it?

Greetings
Jonathan
Best Answer chosen by Jonathan Wolff 7
ANUTEJANUTEJ (Salesforce Developers) 
I was able to modify to fit as per the link but please do note this is a sample snippet and you need to modify it to fit your usecase.
  
<aura:component controller="TaskController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="newTask" type="Task" default="{'sobjectType':'Task'}"/>
    <aura:attribute name="tasks" type="Task[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="mycolumns" type="List"/>
    <lightning:card iconName="standard:task" title="Tasks">
        <div class="slds-card__body slds-card__body_inner"> 
            <ui:inputText aura:id="taskSubject" label="Task Subject" value="{!v.newTask.Subject}"/>
            <ui:inputDateTime aura:id="taskDate" label="Activity Date" value="{!v.newTask.ActivityDate}" displayDatePicker="true"/>
            <center class="slds-p-vertical_small"><ui:button label="Add Task" press="{!c.createNewTask}" /></center>
            
        </div>
        <div>
            <aura:if isTrue="{!not(empty(v.tasks))}">
                <lightning:datatable data="{!v.tasks }" 
                         columns="{!v.mycolumns }" 
                         keyField="Id"
                         hideCheckboxColumn="true"/>
                <aura:set attribute="else">
                    <div Style="text-align : center"> " There are no Tasks currently "</div>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
</aura:component>
  
({
    doInit: function(component, event, helper) {
        
        component.set('v.mycolumns', [
            {label: 'Subject', fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            {label: 'Activity Date', fieldName: 'ActivityDate', type: 'text'},
        ]);
        
        
        var action = component.get("c.loadTasks");
        var whatId = component.get("v.recordId");
        action.setParams({
            "recordId":whatId
        });
            
            action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                    record.ActivityDate= record.ActivityDate;
                });
                component.set("v.tasks", records);
            }
        });
        $A.enqueueAction(action);
    },
    createNewTask : function(component, event, helper) {
        var action = component.get("c.saveTask");
        var newTask = component.get("v.newTask");
        action.setParams({
            "task": newTask
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            
            
            if(component.isValid() && state === "SUCCESS"){
                
                var items = component.get("v.tasks");
                items.push(response.getReturnValue());
                component.set("v.tasks",items);
            }
            else{
                console.log("Failed with state "+state);
            }
        });
        $A.enqueueAction(action);
    }
})

EDIT: made changes in the controller snippet

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Jonathan,

>> https://salesforce.stackexchange.com/questions/157762/custom-task-lightning-component-not-working

The above link has an implementation of building a custom task component, you can check this and modify it accordingly.

For SOQL you can try this SELECT Subject, ActivityDate FROM Task WHERE WhatId=:recordId And ActivityDate>= TODAY AND ActivityDate  <= Next_N_Days:7

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Jonathan Wolff 7Jonathan Wolff 7
Hi, I tried it out and it kinda worked, but I still need some help. I want the components background to be white. In addition I would like it when the tasks would be 2 lines down so they dont collide in the "Add Tasks" button. Would you know a possibility so there are only shown like 5 tasks at one so it isnt to full.

It would be nice if you could help me on it.
Thank you for your good help :D
User-added image
ANUTEJANUTEJ (Salesforce Developers) 
Can you share the snippet you have used so as to check and make changes that you can modify.

I think you can make use of lightning:card around the buttons and input values so that there is a white background, for how to use you can try checking the below link:

>> https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Jonathan Wolff 7Jonathan Wolff 7
Hi ANUTEJ, thank you for the help, could you tell me what to modify to achicve the task component how I want it.
Greetings

Component:
<aura:component controller="TaskController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >

<aura:attribute name="recordId" type="Id" />
<aura:attribute name="newTask" type="Task" default="{'sobjectType':'Task'}"/>
<aura:attribute name="tasks" type="Task[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

<ui:inputText aura:id="taskSubject" label="Task Subject" value="{!v.newTask.Subject}"/>
<ui:inputDateTime aura:id="taskDate" label="Activity Date" value="{!v.newTask.ActivityDate}" displayDatePicker="true"/>
<ui:button label="Add Task" press="{!c.createNewTask}"/>

<aura:iteration items="{!v.tasks}" var="item">
    {!item.Subject}, {!item.ActivityDate}<br/>
</aura:iteration>

</aura:component>

Controller:

({
    doInit: function(component, event, helper) {
    var action = component.get("c.loadTasks");
    var whatId = component.get("v.recordId");
    action.setParams({
        "recordId":whatId
    });
    action.setCallback(this,function(response){
        var state = response.getState();
        if(component.isValid() && state === "SUCCESS"){
            component.set("v.tasks",response.getReturnValue());
        }
        else{
            console.log("Failed with state "+state);
        }
    });
    $A.enqueueAction(action);

    component.set("v.newTask.WhatId",component.get("v.recordId"));
},
createNewTask : function(component, event, helper) {
    var action = component.get("c.saveTask");
    var newTask = component.get("v.newTask");
    action.setParams({
        "task": newTask
    });
    action.setCallback(this,function(response){
        var state = response.getState();
        if(component.isValid() && state === "SUCCESS"){
            var items = component.get("v.tasks");
            items.push(response.getReturnValue());
            component.set("v.tasks",items);
        }
        else{
            console.log("Failed with state "+state);
        }
    });
    $A.enqueueAction(action);
}
})

APEX:

public with sharing class TaskController {
  @AuraEnabled
  public static List<Task> loadTasks(Id recordId){
    return[SELECT Subject, ActivityDate FROM Task WHERE WhatId=:recordId And ActivityDate>= TODAY AND ActivityDate  <= Next_N_Days:7];
  }
  @AuraEnabled
  public static Task saveTask(Task task){
    upsert task;
    return task;
   }
}
ANUTEJANUTEJ (Salesforce Developers) 
I made few changes to the comopnent snippet please check and modify as needed. 
<aura:component controller="TaskController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="newTask" type="Task" default="{'sobjectType':'Task'}"/>
    <aura:attribute name="tasks" type="Task[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:card iconName="standard:task" title="Tasks">
        <div class="slds-card__body slds-card__body_inner"> 
        <ui:inputText aura:id="taskSubject" label="Task Subject" value="{!v.newTask.Subject}"/>
        <ui:inputDateTime aura:id="taskDate" label="Activity Date" value="{!v.newTask.ActivityDate}" displayDatePicker="true"/>
        <ui:button label="Add Task" press="{!c.createNewTask}"/>
        
        </div>
        <div>
            <aura:if isTrue="{!not(empty(v.tasks))}">
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="slds-text-title_caps" scope="col">
                                <div class="slds-truncate" title="Task Subject">Task Subject</div>
                            </th>
                            <th class="slds-text-title_caps" scope="col">
                                <div class="slds-truncate" title="Task Activity Date">Task Activity Date</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration  items="{!v.tasks}" var="item" >
                            <tr class="slds-hint-parent">
                                <td data-label="Task Name">
                                    <div class="slds-truncate" title="Task Subject">{!item.Subject}</div>  
                                </td>
                                <td data-label="Item Name">
                                    <div class="slds-truncate" title="Task Activity Date">{!item.ActivityDate}</div>  
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
                <aura:set attribute="else">
                    <div Style="text-align : center"> " There are no Tasks currently "</div>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
</aura:component>

reference: https://www.sfdckid.com/2019/08/salesforce-lightning-component-to-display-contacts.html

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
ANUTEJANUTEJ (Salesforce Developers) 
>> https://www.infallibletechie.com/2018/07/how-to-hyperlink-record-in.html

The above link has an implementation of adding hyperlink to the records so as to redirect to the respective page you can try checking the red part on the snippet and modify it to fit your need.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Jonathan Wolff 7Jonathan Wolff 7
Hi ANUTEJ, i tried your link but I dont know how to correctly implement this in the Component code you send me. Could you help me with this last problem :D
ANUTEJANUTEJ (Salesforce Developers) 
You will have to refactor your code to fit the implementation in the above link, i.e., you need to remove the HTML table tag you need to use lightning:datatable please try implementing in a similar way and let me know in case if there are any issues to look further.
ANUTEJANUTEJ (Salesforce Developers) 
I was able to modify to fit as per the link but please do note this is a sample snippet and you need to modify it to fit your usecase.
  
<aura:component controller="TaskController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="newTask" type="Task" default="{'sobjectType':'Task'}"/>
    <aura:attribute name="tasks" type="Task[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="mycolumns" type="List"/>
    <lightning:card iconName="standard:task" title="Tasks">
        <div class="slds-card__body slds-card__body_inner"> 
            <ui:inputText aura:id="taskSubject" label="Task Subject" value="{!v.newTask.Subject}"/>
            <ui:inputDateTime aura:id="taskDate" label="Activity Date" value="{!v.newTask.ActivityDate}" displayDatePicker="true"/>
            <center class="slds-p-vertical_small"><ui:button label="Add Task" press="{!c.createNewTask}" /></center>
            
        </div>
        <div>
            <aura:if isTrue="{!not(empty(v.tasks))}">
                <lightning:datatable data="{!v.tasks }" 
                         columns="{!v.mycolumns }" 
                         keyField="Id"
                         hideCheckboxColumn="true"/>
                <aura:set attribute="else">
                    <div Style="text-align : center"> " There are no Tasks currently "</div>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
</aura:component>
  
({
    doInit: function(component, event, helper) {
        
        component.set('v.mycolumns', [
            {label: 'Subject', fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            {label: 'Activity Date', fieldName: 'ActivityDate', type: 'text'},
        ]);
        
        
        var action = component.get("c.loadTasks");
        var whatId = component.get("v.recordId");
        action.setParams({
            "recordId":whatId
        });
            
            action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                    record.ActivityDate= record.ActivityDate;
                });
                component.set("v.tasks", records);
            }
        });
        $A.enqueueAction(action);
    },
    createNewTask : function(component, event, helper) {
        var action = component.get("c.saveTask");
        var newTask = component.get("v.newTask");
        action.setParams({
            "task": newTask
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            
            
            if(component.isValid() && state === "SUCCESS"){
                
                var items = component.get("v.tasks");
                items.push(response.getReturnValue());
                component.set("v.tasks",items);
            }
            else{
                console.log("Failed with state "+state);
            }
        });
        $A.enqueueAction(action);
    }
})

EDIT: made changes in the controller snippet

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
This was selected as the best answer
Jonathan Wolff 7Jonathan Wolff 7
Thank you very much. from this point I will do it myself. I wish you all the best ANUTEJ :D
ANUTEJANUTEJ (Salesforce Developers) 
I would appreciate it if you could close the thread by marking the above answer as the best answer so that it can be useful to others in the future.

Thanks.