+ Start a Discussion
Jefferson FernandezJefferson Fernandez 

Custom Lightning Component not showing in Lightning App Builder Custom Components

Hi,
Can anyone review the codes quickly and check why the component is not showing on the list of available components on the lightning app builder although it has force:appHostable? Thanks!

COMPONENT
<aura:component controller="NonUserAccountTeamController" 
implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes">

	<aura:attribute name="nonUserAccountTeamMembers" type="Non_User_Account_Team__c[]" />
	<aura:attribute name="employees" type="Employee__c[]" />
	
	<aura:handler name="updateNonUserAccountTeam" event="c:updateNonUserAccountTeamUser"
        action="{!c.handleUpdateNonUserAccountTeam}"/>
			
	<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <div class="slds">
 
      <div class="slds-page-header">
        <div class="slds-grid">
          <div class="slds-col slds-has-flexi-truncate">
            <p class="slds-text-heading--label">Coverage Team</p>
              <div class="slds-grid">
                <div class="slds-grid slds-type-focus slds-no-space">
                  <h1 class="slds-text-heading--medium slds-truncate" title="Coverage Team">
                  {!'Coverage Team Members ' + '(' + 'Non_User_Account_Team__c[].size' +')'}
                  </h1>
                </div>
                <ui:button aura:id="button" buttonTitle="Manage the employees handling this account" 
                class="button" label="Add Coverage Team Members" press="{!c.clickAdd}"/>
              </div>
           </div>
         </div>
       </div> <!-- End of Header -->
		</div> <!-- End of SLDS -->
    <c:NonUserAccountTeamListItem nonUserAccountTeams="nonUserAccountTeamMembers" employees="employees"/>
    
    <ui:button aura:id="button" buttonTitle="View all the members of this team" 
    class="button" label="View All" press="{!c.clickViewAll}"/>
     

	
</aura:component>

CONTROLLER: 
({
	doInit : function(component, event, helper) {
		// Prepare the action to load account record
		var action = component.get("c.getUsers");
		action.setParams({
			"recordId" : component.get("v.recordId")
		});
		// Configure response handler
		action.setCallback(this, function(response) {
			var state = response.getState();
			if(component.isValid() && state === "SUCCESS") {
				component.set("v.nonUserAccountTeamMembers", response.getReturnValue());
			} else {
				console.log('Problem getting account, response state: ' + state);
			}
		});
		$A.enqueueAction(action);
	},
	
	clickAdd : function (component, event, helper) {
	    var createRecordEvent = $A.get("e.force:createRecord");
	    createRecordEvent.setParams({
	        "entityApiName": "Non_User_Account_Team__c"
	    });
	    createRecordEvent.fire();
	},
	
	clickViewAll : function (component, event, helper) {
	    var relatedListEvent = $A.get("e.force:navigateToRelatedList");
	    relatedListEvent.setParams({
	        "relatedListId": "nonUserAccountTeamMembers",
	        "parentRecordId": component.get("v.recordId")
	    });
	    relatedListEvent.fire();
	},
	
	handleUpdateNonAccountUserTeam: function(component, event, helper) {
		//Update the new expense
		var updatedUser = event.getParam("nonUserAccountTeamMember");
		helper.updateUser(component, updatedUser);
	},
	
})

HELPER:
({
	saveUser: function(component, user, callback) {
	    var action = component.get("c.saveUser");
	    action.setParams({
	        "user": user
	    });
	    if (callback) {
	        action.setCallback(this, callback);
	    }
	    $A.enqueueAction(action);
	},

	
	createUser: function(component, user) {
	    this.saveExpense(component, user, function(response){
	        var state = response.getState();
	        if (component.isValid() && state === "SUCCESS") {
	            var users = component.get("v.nonUserAccountTeamMembers");
	            expenses.push(response.getReturnValue());
	            component.set("v.nonUserAccountTeamMembers", users);
	        }
	    }); 
	},
	
	updateUser: function(component, user) {
	    this.saveExpense(component, user);
	},
	
})

 
Best Answer chosen by Jefferson Fernandez
Extentia ITExtentia IT
Hi Jefferson,
You should try giving Global Access to all components and their attributes. Also try implementing "force:appHostable, flexipage:availableForAllPageTypes" interface on the inner commponent "NonUserAccountTeamListItem".
Thanks,
Extentia

All Answers

Akhil AnilAkhil Anil
Try this. I just added global access header
 
<aura:component controller="NonUserAccountTeamController" 
implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">

	<aura:attribute name="nonUserAccountTeamMembers" type="Non_User_Account_Team__c[]" />
	<aura:attribute name="employees" type="Employee__c[]" />
	
	<aura:handler name="updateNonUserAccountTeam" event="c:updateNonUserAccountTeamUser"
        action="{!c.handleUpdateNonUserAccountTeam}"/>
			
	<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <div class="slds">
 
      <div class="slds-page-header">
        <div class="slds-grid">
          <div class="slds-col slds-has-flexi-truncate">
            <p class="slds-text-heading--label">Coverage Team</p>
              <div class="slds-grid">
                <div class="slds-grid slds-type-focus slds-no-space">
                  <h1 class="slds-text-heading--medium slds-truncate" title="Coverage Team">
                  {!'Coverage Team Members ' + '(' + 'Non_User_Account_Team__c[].size' +')'}
                  </h1>
                </div>
                <ui:button aura:id="button" buttonTitle="Manage the employees handling this account" 
                class="button" label="Add Coverage Team Members" press="{!c.clickAdd}"/>
              </div>
           </div>
         </div>
       </div> <!-- End of Header -->
		</div> <!-- End of SLDS -->
    <c:NonUserAccountTeamListItem nonUserAccountTeams="nonUserAccountTeamMembers" employees="employees"/>
    
    <ui:button aura:id="button" buttonTitle="View all the members of this team" 
    class="button" label="View All" press="{!c.clickViewAll}"/>
     

	
</aura:component>

 
Jefferson FernandezJefferson Fernandez
Sorry it still didnt' work=( I would like to add the other codes as well maybe it could help. There is no bug as per force.com but its not showing on the available list of components. 

NonUserAccountTeamListItem.cmp
<aura:component>
	<!-- Attribute declaration -->
    <aura:attribute name="nonUserAccountTeams" type="Non_User_Account_Team__c[]"/>
	<aura:attribute name="employees" type="Employee__c[]"/>
	
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Non User Account Teams</h3>
        </header>
    </div>
    
	<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><span class="slds-truncate">Name</span></th>
        <th scope="col"><span class="slds-truncate">Team Role</span></th>
        <th scope="col"><span class="slds-truncate">Department Name</span></th>
        <th scope="col"><span class="slds-truncate">User</span></th>  
      </tr>
    </thead>
    <tbody>
      <aura:iteration items="{!v.nonUserAccountTeamMembers}" var="nonUserAccountTeamMember">
      	<aura:iteration items="{!v.employees}" var="employee">
			<tr>
				<c:NonUserAccountTeamItem nonUserAccountTeamMember="{!nonUserAccountTeamMember}"
				employee="employee"/>
			</tr>			
		</aura:iteration>
      </aura:iteration>
    </tbody>
    </table>

    
</aura:component>
NonUserAccountTeamItem.cmp
<aura:component>

	<aura:attribute name="nonUserAccountTeamMember" type="Non_User_Account_Team__c" />
	<aura:attribute name="employee" type="Employee__c" />
	
	<aura:registerEvent name="updateNonUserAccountTeamUser" type="c:updateNonUserAccountTeamUser"/>
	
        <td>
	        <a aura:id="nonUserAccountTeamMember" href="{!'/one/one.app?#/sObject/'+ v.nonUserAccountTeamMember.Id + '/view'}" target="_blank">              
	      	{!nonUserAccountTeamMember.Team_Member__c}
	        </a>
        </td>   
      	<td>{!nonUserAccountTeamMember.Team_Role__c}</td>                 
      	<td>{!nonUserAccountTeamMember.Department_Name__c}</td>
      	<td>
	      	<ui:inputCheckbox value="{!nonUserAccountTeamMember.User__c}"
	                        click="{!c.clickUser}"/>
      	</td>                 

</aura:component>
NonUserAccountTeamItem Controller JS
({
    clickUser: function(component, event, helper) {
        var updatedUser = component.get("v.nonUserAccountTeamMember");
        var updateEvent = component.getEvent("updateNonUserAccountTeamUser");
        updateEvent.setParams({ 
        	"nonUserAccountTeamMember": updatedUser });
        updateEvent.fire();
    },
})
sfdcMonkey.comsfdcMonkey.com
hi
If you not registered domain for your developer org, then it won't display the lightning components in the Lightning app builder.

Go to Setup | Domain Management | My Domain
Then register your domain name for your developer org


Once the process is done, then it will display your custom lightning components in developer org.
i hope it helps you
let me know if it helps you
Thanks
Jefferson FernandezJefferson Fernandez
Yes i have my own domain. I'm wondering why. But thanks though.
Extentia ITExtentia IT
Hi Jefferson,
You should try giving Global Access to all components and their attributes. Also try implementing "force:appHostable, flexipage:availableForAllPageTypes" interface on the inner commponent "NonUserAccountTeamListItem".
Thanks,
Extentia
This was selected as the best answer
David Roberts 4David Roberts 4
I have the same issue.
If I create a component from scratch through developer console it works. Must a setting to change.
David Roberts 4David Roberts 4
Found the answer here: https://developer.salesforce.com/forums?id=9060G000000I3dKQAS
There's an error in my component.
I stripped it down to the bare essentials and it appeared.

<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" 
                controller="MyController" >
</aura:component>
Debaranjan GhoshDebaranjan Ghosh
I tried to reuse this code but nothing is happening after clicking on save button of the component which is placed on a New app Page under Sales Console. Additionally I added some Console and System Debug Mesages but neither these messages nor alert msg is getting displayed 
Debaranjan GhoshDebaranjan Ghosh
Pasting the reused code 
Aura CMP  :
<aura:component  controller="ContactController" implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
        <aura:attribute name="newContact" type="Contact"  default="{ 'sobjectType': 'Contact',                                        
                     'Last Name': '','Email':'','Phone':'',}"/>                                        

    <form>
        
        <lightning:input aura:id="contactField" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
        <lightning:input aura:id="contactField" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
        <lightning:input aura:id="contactField" type="Phone"  value="{!v.newContact.Phone}"  Name="Phone" label="Phone"/>
        <lightning:button aura:id="contactField" label="Save Contact" onclick="{!c.savecontact}"/>
    </form>
</aura:component>

JS :

({
savecontact: function(component, event, helper) {
    var newcon = component.get("v.newContact");
    console("I am here ");
    var action = component.get("c.save");
     action.setParams({ 
        "con": newcon
    });
     action.setCallback(this, function(a) {
           var state = a.getState();
         console("I am here 1");
            if (state === "SUCCESS") {
                var name = a.getReturnValue();
               alert("success");
            }
         else
         {
              alert("Failed");
         }
        });
    console("I am here 2");
    $A.enqueueAction(action)
}})

APEX : 

public without sharing class ContactController {
    
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId){
        return [select Id,Name, Phone, Email from Contact where AccountId=:accountId];
    }

    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContactsByFilter(Id accountId,String key){
        String query='select Id,Name, Phone, Email from Contact where AccountId=:accountId and Name like \'%'+key+'%\'';
        return Database.query(query);
    }
    @AuraEnabled
    public static Contact save(contact con)
    {
        System.debug(LoggingLevel.DEBUG,'Before Insert');
     insert con;
        System.debug(LoggingLevel.DEBUG,'After Insert');
        return con;
    }
}

Any help will be highly appreciated. Thanks in Advance.
David Roberts 4David Roberts 4
@Debaranjan  There's a couple of things going on here.
You're messages format was incorrect so that wasn't helping!
console.log("I am here");    //you forgot the '.log'
Similarly, your action getting needs 'c.'
var action = component.get("c.save");

I've run into trouble in the past using names of methods that might be reserved words or used in component and controller so I append an 'ae' to my aura enabled methods for clarity and readability.
var action = component.get("c.aeSave");
@AuraEnabled
    public static Contact aeSave(Contact con)
    {
        System.debug(LoggingLevel.DEBUG,'Before Insert');
        insert con;
        System.debug(LoggingLevel.DEBUG,'After Insert');
        return con;
    }//aeSave

I recommend you look at some trailhead to get the hang of formatting these things. Good luck.