How to add a component to lightning app builder?

Question

I have created lightning component, now I wan to add this component to lightning app builder. How to achieve it? my component:

<aura:component controller="TEST_on.AccountComponentController" implements="force:appHostable">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="accLst" type="TEST_on.Account[]"/>
<aura:attribute name="subject" type="String" default="World" />

<aura:iteration items="{!v.accList}" var="accItem">
    <div class="container">    
        Name : {!accItem.Name} <br/>
        BillingState : {!accItem.BillingState}<br/><br/>
    </div>
</aura:iteration> 

controller:

({
doInit : function(component, event, helper) {
    helper.getAccountInfo(component);
}
})

helper

({
getAccountInfo : function(component, event) {

    var action = component.get("c.getAccountInfo");
    var that   = this;
    action.setCallback(this,function(a){

        component.set("v.accList", a.getReturnValue());
        component.set("v.subject", 'test value');
        console.log(a.getReturnValue());
    });
    $A.enqueueAction(action); 
},
})

design

<design:component label="Hello World">
<design:attribute name="subject" label="subject" description="this component is under test" />
</design:component>

I have added the the component tab and enable this component on Mobile Navigation. But still doing this all I am not able to view this component on lightning app builder's component list. Please guide me what I am missing out. I am referring this doc : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder.htm

Answer 1

There is a marker interface that your component needs to implement in order to make it available to Lightning App Builder.

<aura:component ... implements="flexipage:availableForAllPageTypes">

I've not done it, but my assumption is that you just add it to your existing implements attribute with a comma.