Input Data Using Forms Lightning Trailhead

While doing this Challenge it was hard for me to complete so I’m sharing the code which might help others for the Reference.

Trailhead:

https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_forms

CODE:

CAMPING APPLICATION  TO PREVIEW :


<aura:application extends="force:slds" >
<c:campingList />
</aura:application>

CAMPING HEADER COMPONENT:


<aura:component >
	<lightning:layout class="slds-page-header slds-page-header--object-home">
	<lightning:layoutItem >
	<lightning:icon iconName="action:goal" alternativeText="My Camping"/>
</lightning:layoutItem>
	<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">Camping</h1>
<h2 class="slds-text-heading--medium">My Camping</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>

CAMPING LIST COMPONENT:


<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false,
'sobjectType':'Camping_Item__c'}"/>

<!-- NEW Campaing FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">


<c:campingHeader/>
<div aria-labelledby="newCampaingForm">

<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">

<legend id="newCampaingForm" class="slds-text-heading--small
slds-p-vertical--medium">
Add Expense
</legend>

<!-- CREATE NEW Campaing FORM -->
<form class="slds-form--stacked">

<!-- For Name Field -->
	<lightning:input aura:id="expenseform" label="Camping Name"
name="expensename"
value="{!v.newItem.Name}"
required="true"/>
<!-- For Quantity Field -->
	<lightning:input type="number" aura:id="campingform" label="Quantity"
name="expenseamount"
min="1"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
<!-- For Price Field -->
	<lightning:input aura:id="campingform" label="Price"
formatter="currency"
name="expenseclient"
value="{!v.newItem.Price__c}"
/>
<!-- For Check Box -->
	<lightning:input type="checkbox" aura:id="campingform" label="Packed"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>

	<lightning:button label="Create Camping"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem}"/>
</form>
<!-- / CREATE NEW EXPENSE FORM --></fieldset>
<!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->
</div>
<!-- ITERATIING ITEM LISTS -->
<div class="slds-card slds-p-top--medium">

<c:campingHeader/>

<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
<!-- / ITERATIING ITEM LISTS -->
</aura:component>

CAMPING  CONTROLLER :


({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
// Displays error messages for invalid fields
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);

if(validCamping){
var newCampingItem = component.get("v.newItem");
//helper.createCamping(component,newCampingItem);
var campings = component.get("v.items");
var item = JSON.parse(JSON.stringify(newCampingItem));

campings.push(item);

component.set("v.items",campings);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
'Price__c': 0,'Packed__c': false });
}
}
})

CAMPING LIST ITEM COMPONENT:


<aura:component >
<aura:attribute name="item" type="Camping_Item__c"/>

Name:
<ui:outputText value="{!v.item.Name}"/>

Price:
<ui:outputCurrency value="{!v.item.Price__c}"/>

Quantity:
<ui:outputNumber value="{!v.item.Quantity__c}"/>

Packed:
<ui:outputCheckbox value="{!v.item.Packed__c}"/>

</aura:component>

OUTPUT:

INPUT

Advertisements

Javascript & Visualforce Tips

                   javscript_pamwww

How to Get The Current page Url Using Javascript:

var curentUrl= document.location.href;

How to get previous page Url in current page using Javascript:

var oldURL = document.referrer;

Display buttons in visualforce page based on output of URL using javascript:

Here we are going to display the button by using output of the URL.For example if the URL has a term called “Mode=Edit” then the javascript will be called and display the button.

How to check the URL has particular string so this below code will look for the string in URL.

window.location.href.indexOf(‘Mode=Edit‘ )

Assume you have Two Buttons Button1&Button2 at initial stage it will be displayed as none by using style=”display:none;” 

Button1:


<button type="button" id ="hidecancel" title="Cancel" style="display:none;" />

Button 2:


<button type="button" id ="saveButton" title="Save" style="display:none;" />

If the URL has particular string in onloading of page, javascript is triggered  to display the  button using the Id  like below.Other wise it will be Hide Mode.


var a= document.getElementById('hidecancel');
a.style.display='block';

Full Code:


if ( window.location.href.indexOf('Mode=Edit' )> 0) {
var a= document.getElementById('hidecancel');
var b= document.getElementById('saveButton');
a.style.display='block';
b.style.display='block';

}

 

Alert for Unsaved Data in Visualforce By Using Javascript

                              javscript_pamwww 

we can make use of  JavaScript to identify for changes in whole Visualforce Page like field value changes, Dropdown Value Changes.So no need to pass Variables to each line of code to identify for changes.This block of code will look changes in each row to create an Alert. You write this javascript at bottom of Visualforce Page.

<script>
	//unsaved Without Saving Data 
	var unsaved = false;

	$(":input").change(function(){   //triggers change in all input fields including text type
		unsaved = true;
	});

	function unloadPage(){ 
		if(unsaved){
			return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
		}
	}
	window.onbeforeunload = unloadPage; 
</script>

Customize Community Header

Attach Image To Community Header:

1.)Click Branding  and Attach Header Image.

Comm Header Image

Customize Community Header in white Color:

By Default you will be seeing Community header in Grey color and if you attach image with pure white color also default color is Grey color Like this,

grey

So In Order to change this you need to add CSS and White Color image like This,

1.)Attach White Image In to The Header and inspect the Element like this and paste the below code in Branding.

inspect

2.)Paste the code by clicking this,

àttach

Code:

.forceCommunityOmniBox .no-assigned-image
.default-bg-overlay {background:RGB(0,0,0,0); height:inherit}

Output:

white header

LIGHTNING EXPERIENCE “WINTER 18” FEATURES

1.Lightning Experience Gets a New Look and Feel

From winter18 you can change your Background Image and color, Like this,
1.Go To Setup  >> QuickFind >> Type Themes and Branding.
2. Select Themes and Branding >>Here you go.

2.List Views: Customizations, Mass Inline Editing, and Text Wrapping

1.we can now update up to 200 records in a list view.
2.You can clone your list view by Opening  List View Controls and click Clone& Save As.  
3.Wrap Text in List Views at the top of the list view column.
4.Set Custom Column Widths on More List Views.

3.Turn On Multiple Currencies Without Contacting Support

 To enable this feature,
1.From Setup enter Company Information in the Quick Find box.
2.Then select Company Information and click Edit.
3.Enable Activate Multiple Currencies, and save your changes. 

4.Manage Inactive Picklist Values Easier with Pagination

pagination occurs automatically when your inactive value list has more than 30 items.Click Go to list option appears at the bottom of the first 30 entries. Click it to see all your values, page by page, 30 values on each page.

5.Track Time with the Time Field Type

The time field type is useful for time management, event planning, and project management.To enable this feature in all other editions, contact Salesforce.The time field type is a timestamp minus the date. You can select the time field type when you create a custom field.

To support using time in formulas,
TIMEVALUE and TIMENOW functions, as well as new HOUR, MINUTE, SECOND and MILLISECOND functions.

Override Approve and Reject Button of Approval Process in VF Page

1.) Can we control the approve and Reject Button in Visualforce page ?

Yes you can control by creating custom approval and reject button in visualforce page.

2.) Can we remove the standard approve and reject Button in approval process Related list?

approved

Yes you can hide by using JavaScript and instead of this you can create Command buttons in VF page for approve and reject. Control the button action in controller behind.

Code for Hiding Approve,Reject and Submit for approval by using Javascript :

We need to get the column id of Approve,Reject and Submit for approval like the below screenshot and use the column Id in javascript like below to Hide it.

inspect hide approve

<apex:relatedList list="ProcessSteps"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 $( document ).ready(function() {    
 $(".actionColumn").css("display","none"); //Approve and Reject Hide 
 $("input[name='piSubmit']").css("display","none"); //Submit for approval }); </script>

Formulas & Validation Rules

student_board_formula_solution_80802_1920x1080

Validation Rule for Case not closed in Queue:

AND(
NOT(ISBLANK(Owner:Queue.Id)),
ISPICKVAL(Status, "Closed")
)

 Calculate the end date of the month Based on the start date of the month:

DATE(
YEAR(Start_date__c),
MONTH(Start_date__c),
CASE( MONTH(Start_date__c),
1, 31,
2, IF( MOD( YEAR(Start_date__c), 4) = 0, 29, 28),
3, 31,
4, 30,
5, 31,
6, 30,
7, 31,
8, 31,
9, 30,
10, 31,
11, 30,
12, 31,
0
)
)

Calculate Total hours from Date:

TEXT(
FLOOR(Current_Time__c - CreatedDate) *24
) & " Hours "

Calculate Date, Minutes, Hours:

TEXT(
FLOOR(Current_Time__c - CreatedDate)
) & " Days " &
TEXT(
ROUND(MOD((Current_Time__c - CreatedDate)*24,24),0)
) &" Hours " &
TEXT(
ROUND(MOD((Current_Time__c- CreatedDate)*1440,60),0)
) &" Minutes "

Merge five picklist field values into one formula field:

SUBSTITUTE(
IF(ISBLANK(TEXT(Picklist_1__c)), NULL, TEXT(Picklist_1__c)+ ", ")+
IF(ISBLANK(TEXT(Picklist_2__c)), NULL, TEXT(Picklist_2__c)+ ", ")+
IF(ISBLANK(TEXT(Picklist_3__c)), NULL, TEXT(Picklist_3__c)+ ", ")+
IF(ISBLANK(TEXT(Picklist_4__c)), NULL, TEXT(Picklist_4__c)+ ", ")+
IF(ISBLANK(TEXT(Picklist_5__c)), NULL, TEXT(Picklist_5__c)+ ", ") + ".",
", .",
NULL
)