10

I'm working on a lightning application for managing work items & tasks. Currently, I'm having trouble with just updating just one instance of a workItem component I have. The way I have things now, all my workItems change in my application.

Other questions

  • How do I manage changing just one work item instance?
  • Is it a good choice to have my modal at the root of my application? Since my modal is at the root & not in the same DOM hierarchy as my workItem components, I can't use a "component" event to handle events up the chain & I feel like this is complicating things.
  • When should I be using application events? Any brief example scenarios would be appreciated.

Current Flow:

- User clicks "Add Task" button inside a workItem component, which fires an application 'addTaskEvent' event. - At my application root I have a 'taskModal' component. The 'taskModal' has a handler listening for the application "addTaskEvent" event & when it handles it, it just unhides the modal. When the modal is open, the user can insert a new task name, then click either cancel or save. If save is hit in the modal, I fire another application event, with the new task name packaged. - My workItem component has a handler defined for the application event the modal fired. My handler function for this event simply grabs the new task name that the modal event gave me & I just push & update the tasks for the work Item. - **Problem**: when I push my new task, all of workItems get updated with the new task, instead of just the workItem I initially clicked. I realize this is because all of workItems are listening to the same event the modal triggered.

taskboardApp.app

 <aura:application extends="force:slds"> <c:AA_taskboard /> ---> workList.cmp --> workItem.cmp <c:AA_taskModal/> </aura:application>

taskboard.cmp the taksboard controller simply fetches the work items on init & adds the work items to the workItems attribute.

<aura:component controller="AA_taskboardController"> <aura:attribute name="workItems" type="agf__ADM_Work__c[]" description="all of the items for the current sprint"/> <aura:handler name="init" action="{!c.doInit}" value="{!this}" description="fetches work item data"/> <div class="slds-container--x-large slds-container--center"> <c:AA_workList workItems="{!v.workItems}" /> </div> <c:AA_taskModal /> </aura:component>

Worklist.cmp

<aura:component> <aura:attribute name="workItems" type="agf__ADM_Work__c[]" /> <ol class="work-list"> <aura:iteration items="{!v.workItems}" var="workItem"> <li class="work-item-container"> <c:AA_workItem work="{!workItem}" tasks="{!workItem.agf__Tasks__r}"/> </li> </aura:iteration> </ol> </aura:component>

WorkItem.cmp

<aura:component> <aura:attribute name="work" type="agf__ADM_Work__c" /> <aura:attribute name="tasks" type="agf__ADM_Task__c[]"/> <aura:attribute name="showTasks" type="Boolean" default="false" /> <aura:registerEvent name="addTaskEvent" type="c:AA_addTaskEvent" description=" an application event fired when user clicks add task button on this work item. Task modal component at the root(taskboard.cmp) listens for this event."/> <aura:handler event="c:AA_updateTaskEvent" action="{!c.updateTask}" description="Handler for application event fired from the task modal after the user had entered a new task name & hit save. This event sends up the taskname to a workItem component that's listening for it"./> <div class="work-item"> <header >{!v.work.agf__Subject__c}</header> <button onclick="{!c.addTask}">Add Task</button> <!-- Tasks --> <ol class="work-tasks"> <aura:iteration items="{!v.work.agf__Tasks__r}" var= "taskItem"> <li class="task-item"> <c:AA_taskItem task="{!taskItem}" /> </li> </aura:iteration> </ol> </div> <div> </aura:component>

workItemController.js

 ({ toggleShowTasks: function(component, event, helper) { component.set("v.showTasks" , !component.get('v.showTasks')); }, addTask: function(component, event, helper){ var appEvent = $A.get("e.c:AA_addTaskEvent"); appEvent.setParams({ work : component.get("v.work") }); appEvent.fire(); console.log('fired addtask event from WORK') }, updateTask: function(component, event, helper){ console.log('fired update task in work item-------------------'); var taskName = event.getParams("taskName").taskName; var newTask = {agf__Subject__c: taskName}; var workTasks = component.get("v.tasks"); console.log("the work item-----", workTasks) workTasks.push(newTask); component.set("v.tasks", workTasks); //all work items get pushed my new task since workItem.cmp //has a listener } })

taskModal.cmp

<aura:component> <div class="task-modal hide" aura:id="task-modal"> <!-- other code removed for brefvity --> <ui:inputText aura:id="task-input" class="slds-input"/> <button onclick="{!c.cancelTask}" >Cancel</button> <button onclick="{!c.saveTask}" >Save</button> </div> </aura:component>

taskModalController.js

 ({ showTaskModal: function(component, event, helper) { var taskModal = component.find('task-modal'); $A.util.removeClass(taskModal, "hide") var workItem = event.getParams('work').work; console.log('event.getParams(work??)', workItem); component.set('v.work', workItem); }, cancelModal: function(component, event, helper){ }, //when our modal opens we attach a work item to the modal, so it should be available here by now. //note: I tried to pass the work component via the addTask event but you can't. There's no type value with component for the attribute you creaate in an event. saveTask: function(component, event, helper){ var taskInput = component.find('task-input'); var taskName = taskInput.get("v.value"); var updateEvent = $A.get("e.c:AA_updateTaskEvent"); updateEvent.setParams({'taskName': taskName}); updateEvent.fire(); var taskModal = component.find('task-modal'); $A.util.addClass(taskModal, "hide") //clear modal text taskInput.set('v.value', "") console.log("FIRED updateTask from saveTask function"); }, cancelNewTask: function(component, event, helper){ var taskModal = component.find('task-modal'); $A.util.addClass(taskModal, "hide") } })
Improve this question
1
  • can you post your app, controller and the taskmodal component. Commented Nov 4, 2016 at 17:34

1 Answer 1

Reset to default
3

You can fire an application event from the Modal component(which you are doing now), which carries necessary data and a unique indentifier(might me workitem id) to identify a specific child component.

Also, passing the workitem object from the workItem Component would also work too but you have access it incorrectly in the modal component.

So do the following changes:

taskModalController.js

1.Access the workitem using event.getParam():

showTaskModal : function(component, event, helper) { var taskModal = component.find('task-modal'); $A.util.removeClass(taskModal, "hide") var workItem = event.getParam('work'); // Now you'll get the workitem object console.log('event.getParam(work??)', workItem); component.set('v.work', workItem); }

2.Add the workItem object/id to the AA_updateTaskEvent app event along with taskName.

saveTask: function(component, event, helper){ var taskInput = component.find('task-input'); var taskName = taskInput.get("v.value"); var updateEvent = $A.get("e.c:AA_updateTaskEvent"); updateEvent.setParams( { 'taskName': taskName, 'workItemId':component.get("v.work").Id } ); updateEvent.fire(); // other logics },

3.Check if you need to add the task in workItem child.

workItemController.js

updateTask: function(component, event, helper){ console.log('fired update task in work item-------------------'); var taskName = event.getParam("taskName"); // Get the task name var workItemId = event.getParam("workItemId"); // Get the workitemid var workItem = component.get("v.work"); //if it turns out true, then we have got to the workitem component whose's task should be updated. if(workItem.Id == workItemId){ var newTask = {agf__Subject__c: taskName}; var workTasks = component.get("v.tasks"); console.log("the work item-----", workTasks) workTasks.push(newTask); component.set("v.tasks", workTasks); } //all work items get pushed my new task since workItem.cmp //has a listener }

To answer your other questions.

1) I have already answer it above.

2) In my opinion its better to keep the modal in the root rather than in the workItem which causes unnecessary DOM to be present. Honestly, I don't see anything complicate here.

3) Application events are best suited in places where components that aren't part of containment hierarchy need to communicate. Your discussion to keep the modal standalone(common to your app/component) and communicating with app event is a perfect example.

Improve this answer
8
  • I feel both detail model and list should reside in another container and it's always better to avoid application events as they are slow compared to component events .Also it's almost like dirty checking if we are adding an if statement to detect that Commented Nov 4, 2016 at 20:51
  • @MohithShrivastava - with your suggestion how would you handle the event flow? With taskboard.app --> taskboard--> newcontainer--> taskmodal , worklist? I still see the same problem happening where I can't use a component event since the modal wouldn't be in the same DOM hierarchy as the work item (that is Modal isn't an ancestor of a work item) to listen for the event. In this case I think an app event would be necessary now that I think about it or am I misunderstanding? Thanks Commented Nov 4, 2016 at 22:50
  • In this case the newcontainer will have taskmodal and worklist as child components .modal cannot be decouple if we need to use component events . Commented Nov 4, 2016 at 23:14
  • Also i will see if i get time over weekend to put together a sample with component event .I think this is right scenario for using component events . Commented Nov 4, 2016 at 23:26
  • 2
    @CliffordFajardo if we have a component(i.e workListParent) which contains both modal and worklist component as Mohit suggested and attach add component event handler to the workListParent instead of modal and change the logic to show the modal, then it removes the use of app event in this case. Commented Nov 5, 2016 at 7:48

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.