In this tutorial we will create another component opportunityCard.cmp
that listens to opportunitySelect.evt
event and then calls an Apex controller opportunityController
on the server to retrieve component details. Finally opportunityCard.cmp
uses the data from opportunityController
and displays it in a simple form.
Create Apex Controller.
Create opportunityController
Apex controller.
- Select File > New > Apex Class
- Enter OpportunityController for the name
- Click Submit
- Paste the following code. It has a method
getOpportunity
that returns an Opportunity details for a givenId
.
@AuraEnabled and staticNote: Aura controller can only call Apex controller methods that have
@AuraEnabled
annotation and areStatic
.
Create 2nd Component
Let’s create another component opportunityCard.cmp
.
- Select File > New > Aura Component
- Enter opportunityCard for the name
- Click Submit
- Add the following code to connect to
opportunityController
Apex controller.
(Remember to change the namespace)
Handle Event
Update the opportunityCard.cmp` Component’s markup to handle the event.
Let’s look at the code:
This connects the component to Apex controller.
This makes this component to listen toNAMESPACE:selectOpportunity
and call Javascript controllerc.handleSelectOpportunity
.<div>Id: {!m.Id}</div>
m.
prefix stands for model. Typically when we get data from the server it can be accessed by usingm.myServerData
.
Add it to the App
Open our Opportunities.app
and embed this component <NAMESPACE:opportunityCard/>
below opportunitySelect
component so the application looks like below:
Test The App
Click on the “Preview” button in the side panel of the app or open up https://<yourOrg>/<namespace>/<appName>.app
in a browser.