Salesforce Live: November 2019

Apex Controller :
==================
public class PruductController {
@AuraEnabled
public static List<Kitchen_Products__c> getProducts() {
return [select Id,Name,Country__c,Price__c,Product_Details__c,Product_Image__c from Kitchen_Products__c];
}
@AuraEnabled
public static List<Product_Track__c> getTrackingList(String recordId) {
return [Select Id,Kitchen_Products__c,Track_Package__c From Product_Track__c where Kitchen_Products__c =:recordId Order By CreatedDate Asc];
}
}

ProductView:
============
<aura:component controller="PruductController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="properties" type="Kitchen_Products__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:Card>
<lightning:layout horizontalAlign="center" multipleRows="true">
<aura:iteration items="{!v.properties}" var="property">
<lightning:layoutItem padding="around-small" size="12" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="6">
<c:ProductTilleView property="{#property}"/>
</lightning:layoutItem>
</aura:iteration>
</lightning:layout>
</lightning:Card>
</aura:component>

ControllerJS :
===============
({
doInit: function(component, event, helper) {
helper.getProperties(component);
},
})

HelperJS:
=========
({
getProperties : function(component) {
var action = component.get("c.getProducts");
action.setCallback(this, function(response) {
component.set("v.properties", response.getReturnValue());
});
$A.enqueueAction(action);
}
})

Style.CSS:
==========
.THIS .slds-p-around--small {
padding-left: 6px;
padding-right: 6px;
padding-top: 0;
padding-bottom: 6px;
}

Event :
=======
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="property" type="Kitchen_Products__c"/>
</aura:event>
--------------------------------------------------------------------------------------------------------------------------------
ProductTilleView:
=================

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="property" type="Kitchen_Products__c"/>
<aura:registerEvent name="ProductDetailsViewEvent" type="c:ProductDetailsViewEvent"/>
<a onclick="{!c.propertySelected}">
<div style="{# 'background-image:url(' + v.property.Product_Image__c + ')'}">
<div class="lower-third">
<h1 class="truncate">{#v.property.Name}</h1>
<div>{#v.property.Country__c}</div>
<div>Price: {#v.property.Price__c}</div>
<div><lightning:formattedNumber value="{#v.property.Price__c}" style="currency" currencyCode="USD"/></div>
</div>
</div>
</a>
</aura:component>

JS:
===
({
propertySelected : function(component) {
console.log("rules ::"+JSON.stringify(component.get("v.property")));
var appEvent = $A.get("e.c:ProductDetailsViewEvent");
appEvent.setParams({property : component.get("v.property")});
appEvent.fire();
}
})

Style.CSS:
==========
.THIS > div {
position:relative;
display: inline-block;
/*margin: 3px 6px;
padding: 1rem;*/
width: 100%;
height: 220px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;
/*border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;*/
}

.THIS .lower-third > div {
/*font-weight: 300;*/
padding: 0;
margin: 0;
}

.THIS .lower-third h1 {
font-size: 18px !important;
padding: 0;
margin: 0;
}

.THIS .open-button {
position: absolute;
bottom: 6px;
right: 4px;
}

.THIS .truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-------------------------------------------------------------------------
ProductDetailsView.cmp
=======================
<aura:component controller="PruductController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="property" type="String"/>
<aura:attribute name="isProductVisible" type="Boolean" default="false"/>
<aura:attribute name="desc" type="String"/>
<aura:attribute name="productName" type="String"/>
<aura:attribute name="countryName" type="String"/>
<aura:attribute name="productPrice" type="currency"/>
<aura:attribute name="product" type="Kitchen_Products__c" />
<aura:attribute name="recordId" type="String"/>
<aura:handler event="c:ProductDetailsViewEvent" action="{!c.consumeEventDetails}"/>
<aura:attribute name="slideIndex" type="Integer" default="0"/>
<aura:attribute name="slideWidth" type="Integer" default="0"/>
<aura:attribute name="productTrack" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="properties" type="Kitchen_Products__c[]"/>

<aura:if isTrue="{!v.isProductVisible}">
<force:recordData aura:id="service"
recordId="{!v.recordId}"
targetFields="{!v.product}"
fields="['Id', 'Name', 'Country__c', 'Product_Details__c']" />
<lightning:card >
<aura:set attribute="title">
<lightning:icon iconName="standard:household"/>
<span class="title">Summary</span>
</aura:set>
<aura:set attribute="actions">
<lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
</aura:set>
<aura:set attribute="actions">
<lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
</aura:set>
<img src="{!v.property}"/>
<div class="summary">
<p><b>{!v.productName}</b>, {!v.countryName}</p>
<p>{!v.desc}</p>
<h3><lightning:formattedNumber value="{!v.productPrice}" style="currency" maximumFractionDigits="0" currencyCode="USD"/></h3>
</div>
</lightning:card><br/>
<lightning:card>
<section class="slds-card">
<ol class="slds-setup-assistant">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-summary-detail slds-is-open">
<div class="slds-container_fluid">
<div class="slds-summary-detail__title">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">
<button class="slds-button slds-button_reset" aria-controls="step-1-summary-action" aria-expanded="true">{!v.productName} Tracking</button>
</h3>
<p>{!v.desc}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-hidden="false" class="slds-summary-detail__content" id="step-1-summary-action">
<div class="slds-setup-assistant__step-detail">
<div class="slds-progress slds-progress_vertical slds-progress_success">
<ol class="slds-progress__list slds-progress__list-bordered">
<aura:iteration items="{!v.productTrack}" var="track">
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">{!track.Track_Package__c}</div>

</div>
</li>
</aura:iteration>
</ol>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</section>
</lightning:card>
</aura:if>
<aura:if isTrue="{! !v.isProductVisible}">
<lightning:card>
<lightning:carousel disableAutoRefresh="false" disableAutoScroll="false">
<aura:iteration items="{!v.properties}" var="property">
<lightning:carouselImage
src = "{!property.Product_Image__c}"
header = "{!property.Name}"
description = "{!property.Price__c}"
alternativeText = "{!property.Name}"
href = "{!property.Product_Image__c}">
</lightning:carouselImage>
</aura:iteration>
</lightning:carousel>
</lightning:card>
</aura:if>
</aura:component>

JS:
====
({
doInit: function(component, event, helper) {
helper.getProperties(component);
},
consumeEventDetails : function(cmp, event) {
var property = event.getParam("property");
cmp.set("v.property",property.Product_Image__c);
cmp.set("v.desc",property.Product_Details__c);
cmp.set("v.productName",property.Name);
cmp.set("v.countryName",property.Country__c);
cmp.set("v.productPrice",property.Price__c);
cmp.set("v.recordId",property.Id);
cmp.set("v.isProductVisible",true);
var action = cmp.get("c.getTrackingList");
action.setParams({"recordId":property.Id});
action.setCallback(this, function(response) {
console.log("hello faz::"+JSON.stringify(response.getReturnValue()));
cmp.set("v.productTrack", response.getReturnValue());
});
$A.enqueueAction(action);
},
editRecord : function(component, event, helper) {
var recordId = component.get("v.recordId")
var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": recordId
});
editRecordEvent.fire();
}
})

HelperJS:
=========
({
getProperties : function(component) {
var action = component.get("c.getProducts");
action.setCallback(this, function(response) {
component.set("v.properties", response.getReturnValue());
});
$A.enqueueAction(action);
}
})

CSS:
=====

.THIS .slds-card__body {
padding: 0 16px 0 12px;
display: flex;
height: 550px;
}

.THIS .slds-card__body > div {
flex: 1;
padding: 8px 16px 0 16px;
}

.THIS .slds-card__body .summary {
text-align: left;
}

.THIS img {
height: 350px;
width: 300px;
border-radius: 50%;
border: none;
}

.THIS .slds-icon-standard-household {
background-color: transparent;
}

.THIS .slds-icon-standard-household svg {
fill: #54698D;
}

.THIS h3 {
font-size: 18px;
color: #0070D2;
font-weight: 300;
}

.THIS .select {
margin-top: 20px;
text-align: center;
}

Salesforce Live

Salesforce Lightning Application Events Tutorial with single page

Featured

What is Cryptography in salesforce and what are all the algorithms provided by them ?

Popular

Translate