function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ToxtarToxtar 

Lightning Alternatives to JavaScript Buttons Discover Lightning Actions - Trailhead

I am having trouble with what I am to do with this trailhead module.  I am at this stage and have installed lightning component quickcontact.
I am not a dev so this is hard for me.

Create a Lightning Action
To complete this challenge, you need to add a Lightning component to your org. Then use that component to create a Lightning action on the Account object. When the action’s button is clicked, it creates a new contact based on form input. To get started, install this package that contains the component bundle that you'll need to modify.
The Lightning component must be named quickContact. (Does this name need to include the capital C in contact? It is loaded as all lowercase) 
Add the appropriate interfaces to the quickContact component. (Hint: there are two.) What does this mean?  Is this referring to editing the code?
Create a new action with Label Quick Contact and Name Quick_Contact on the Account object that invokes the quickContact component.
Add the action to the Account Layout page layout.
Having trouble installing your app? Read this article for help.
Any tips would be greatly appreciated.
Best Answer chosen by Toxtar
Alap MistryAlap Mistry
Continued above post,
Build>Customize>Accounts>Buttons, Links, and Actions>New Action click. Set value as below screenshot. User-added image
Then click Save.
After this, Build>Customize>Accounts>Page Layouts click. Click Edit in front of Account Layout. Click Salesforce1 & Lightning Actions and find Quick Contact. Then Drag it and drop in Salesforce1 and Lightning Experience Actions section at first position. Then Save Layout and check your challenge.

If it is helpful, then mark it as Best Answer.
Regards,
Alap Mistry

All Answers

Alap MistryAlap Mistry
First, Install Package in DE/Trailhead Playground. Make sure that Package will install in your logged-in DE/Playground which is ensure from your URL (After clicking install package link). After that open your Developer Console and copy this code.

quickcontact.cmp:
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="QuickContactController">

    <aura:attribute name="account" type="Account" />
    <aura:attribute name="newContact" type="Contact"
        default="{ 'sobjectType': 'Contact' }" /> <!-- default to empty record -->
    <aura:attribute name="hasErrors" type="Boolean"
        description="Indicate if there were failures when validating the contact." />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- Display a header with details about the account -->
    <div class="slds-page-header" role="banner">
        <p class="slds-text-heading--label">{!v.account.Name}</p>
        <h1 class="slds-page-header__title slds-m-right--small
            slds-truncate slds-align-left">Create New Contact</h1>
    </div>

    <!-- Display form validation errors, if any -->
    <aura:if isTrue="{!v.hasErrors}">
        <div class="recordSaveError">
            <ui:message title="Error" severity="error" closable="true">
                The new contact can't be saved because it's not valid.
                Please review and correct the errors in the form.
            </ui:message>
        </div>
    </aura:if>

    <!-- Display the new contact form -->
    <div class="slds-form--stacked">

        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactFirstName">First Name: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactFirstName"
                value="{!v.newContact.FirstName}" required="true"/>
            </div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactLastName">Last Name: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactLastName"
                value="{!v.newContact.LastName}" required="true"/>
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="contactTitle">Title: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactTitle"
                value="{!v.newContact.Title}" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactPhone">Phone Number: </label>
            <div class="slds-form-element__control">
              <ui:inputPhone class="slds-input" aura:id="contactPhone"
                value="{!v.newContact.Phone}" required="true"/>
            </div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="contactEmail">Email: </label>
            <div class="slds-form-element__control">
              <ui:inputEmail class="slds-input" aura:id="contactEmail"
                value="{!v.newContact.Email}" />
            </div>
        </div>

        <div class="slds-form-element">
            <ui:button label="Cancel" press="{!c.handleCancel}"
                class="slds-button slds-button--neutral" />
            <ui:button label="Save Contact" press="{!c.handleSaveContact}"
                class="slds-button slds-button--brand" />
        </div>

    </div>

</aura:component>
on right side, click Controller, then paste this code.
quickcontactController.js:
({
    doInit : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.recordId")});

        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    },

    handleSaveContact: function(component, event, helper) {
        if(helper.validateContactForm(component)) {
            component.set("v.hasErrors", false);

            // Prepare the action to create the new contact
            var saveContactAction = component.get("c.saveContactWithAccount");
            saveContactAction.setParams({
                "contact": component.get("v.newContact"),
                "accountId": component.get("v.recordId")
            });

            // Configure the response handler for the action
            saveContactAction.setCallback(this, function(response) {
                var state = response.getState();
                if(component.isValid() && state === "SUCCESS") {

                    // Prepare a toast UI message
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Contact Saved",
                        "message": "The new contact was created."
                    });

                    // Update the UI: close panel, show toast, refresh account page
                    $A.get("e.force:closeQuickAction").fire();
                    resultsToast.fire();
                    $A.get("e.force:refreshView").fire();
                }
                else if (state === "ERROR") {
                    console.log('Problem saving contact, response state: ' + state);
                }
                else {
                    console.log('Unknown problem, response state: ' + state);
                }
            });

            // Send the request to create the new contact
            $A.enqueueAction(saveContactAction);
        }
        else {
            // New contact form failed validation, show a message to review errors
            component.set("v.hasErrors", true);
        }
    },

	handleCancel: function(component, event, helper) {
	    $A.get("e.force:closeQuickAction").fire();
    }
})
on right side, click Helper, then paste this code.
quickcontactHelper.js:
({
	validateContactForm: function(component) {
        var validContact = true;

        // First and Last Name are required
        var firstNameField = component.find("contactFirstName");
        if($A.util.isEmpty(firstNameField.get("v.value"))) {
            validContact = false;
            firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
        }
        else {
            firstNameField.set("v.errors", null);
        }
        var lastNameField = component.find("contactLastName");
        if($A.util.isEmpty(lastNameField.get("v.value"))) {
            validContact = false;
            lastNameField.set("v.errors", [{message:"Last name can't be blank"}]);
        }
        else {
            lastNameField.set("v.errors", null);
        }

        // Verify we have an account to attach it to
        var account = component.get("v.account");
        if($A.util.isEmpty(account)) {
            validContact = false;
            console.log("Quick action context doesn't have a valid account.");
        }

        // TODO: (Maybe) Validate email and phone number

        return(validContact);
	}
})
Then save this all and add quickcontact action to Account page layout.
 
Alap MistryAlap Mistry
Continued above post,
Build>Customize>Accounts>Buttons, Links, and Actions>New Action click. Set value as below screenshot. User-added image
Then click Save.
After this, Build>Customize>Accounts>Page Layouts click. Click Edit in front of Account Layout. Click Salesforce1 & Lightning Actions and find Quick Contact. Then Drag it and drop in Salesforce1 and Lightning Experience Actions section at first position. Then Save Layout and check your challenge.

If it is helpful, then mark it as Best Answer.
Regards,
Alap Mistry
This was selected as the best answer
ToxtarToxtar
All the steps here by Alap are spot on.
Candida GnanasekaranCandida Gnanasekaran
Thanks a lot. I missed to edit the cmp and controller files and thus encountered an error. 
reneejones816reneejones816
I did all of this and added quick action to the page layout even varified that it is there and working.  I am getting the following error 
Challenge Not yet complete... here's what's wrong: 
The Action 'Quick Contact' was not found on the 'Salesforce1 and Lightning Experience Actions' section of the 'Account Layout' page layout. Please follow the requirements and ensure everything is setup correctly
Alap MistryAlap Mistry
Hello reneejones816,
Can you post your "Quick Contact" action settings (Name, Label, etc.). May be I will help you and also post code of Component, Controller and Helper.
Regards,
Alap Mistry
reneejones816reneejones816
Is this what you are looking for 

User-added image
Alap MistryAlap Mistry
Hello reneejones816,
Make sure you placed "Quick Contact" action at first position of Salesforce1 and Lightning Experience Actions section of the Account Layout page layout.
Regards,
Alap Mistry
reneejones816reneejones816
I did that actually its the only option there
 
reneejones816reneejones816
User-added image
Alap MistryAlap Mistry
Hello reneejones816,
Delete all component, Controller, Helper code and "Quick Contact" action from your org and create it again.
Regards,
Alap Mistry
reneejones816reneejones816
I have done that 3 times, but maybe 4th times a charm. Standby
reneejones816reneejones816
I deleted everything and uninstalled the package. Then I started the challenage all over again.  Still says its not seeing it on the account page layout.  
Alex Sloan (MCS)Alex Sloan (MCS)
I am struggling with this as well.  I can see "Quick Contact" in the "Salesforce1 & Lighting Actions Section" but I can't drop it anywhere on the page.  Little lost on this this.  Where should I place it?User-added image
Alex Sloan (MCS)Alex Sloan (MCS)
Cancel that I figured it out....
Kenneth DevorakKenneth Devorak
When I save the quickcontact.cmp I get the follow error:

Failed to save undefined: Invalid definition for null:QuickContactController: null: Source

I coppied the code Alap posted for us. Anyhelp would be great here.
KANTESH GUTTALKANTESH GUTTAL
Thank you Alap for those steps, but I wanted to understand why the code had to be pasted though there was already existing code. Hope my question is clear...seems the step we performed was redundant, but then it worked, so I am obviously missing something. Appreciate your help in understanding.
Thomas HThomas H
Thanks Alap / Toxtar: 

See attached ... having challenges like this in so many modules at > Intermediate & Advanced level   .. trying to hit the 200 Trail module range but many sticking points like this ...                 Appreciate the step by step help !  THX
 Thoughts ?  

User-added image

User-added image
 
Michael Ho 29Michael Ho 29
 Just be mindful to add  --- implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" --- in the controller component tag: 

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"controller="QuickContactController">
Marta Szymanska 10Marta Szymanska 10
I put all codes as above and can save it and dont dee that as componentUser-added image
Serge SologubSerge Sologub
Folks, I got an error - The Action 'Quick Contact' with Name 'Quick_Contact' was not found on the Account object. Please follow the requirements and ensure everything is setup correctly. I took all steps above and still have this error. Where I can found/edit/add the necessary Account objest?
Thomas HThomas H
Finally solved all the different pieces of this puzzle after reading (2) different solutions in Trailhead Community. 
SEE BELOW. 

Read *both these Threads and you will learn & solve this.
Thanks to (1) Alap Mistry / Toxtar        https://developer.salesforce.com/forums/?id=9060G000000IBhPQAW   
+   (2) Caden Howell & Michelle Morrissey        https://success.salesforce.com/answers?id=9063A000000E4tPQAS

Solved !
Ashutosh Mahakud 9Ashutosh Mahakud 9
I am trying to save the QuickContact.cmp but its throwing an error.Please see the screenshotUser-added image