Description of a very simple component to provide the Lightning Design System - Page Header

__PageHeader - Simple Lightning Component.md

Overview

Really simple component to show a page header in Lightning Experience

Includes the following:

• Component - the core of the component
  • Includes the attributes (the things that other components can configure on this component through code)
  • handlers (to communicate with the controller)
  • events (that it can listen to from other components it contains)
  • elements (the html stuff that we included - like from here: Lightning Design System - Page Header
• Style - the css available for the component
• Controller - the only thing that can execute code heard from components - should be dumb and passes control to handler
• Helper - the only thing that has methods to be called (controller can't call each other's methods - only helper)
• Design - the file that lists what the user sees on the App Builder (and sets the component attributes)
• SVG - the Icon to show in the App Builder

How do I control where the component is shown

You can configure components to be shown in the app builder by giving them either one (or many) of the interfaces that specify where it can be used.

This is made fairly easy for you, because when you create the component in the Developer Console you click checkboxes where it can be used - and it will include those interfaces for you.

Where can I see the components / write components?

In the Developer Console - with a great trailhead module on this available

There is also a decent trailhead module on this as-well

How can I get started writing components?

There is a great trailhead module to help with just that

eg_PageHeader.cmp

<!--
/**
* Very simple header to separate out sections of a page.
* <p>Based on the Lightning Design System - Page Header:
*     <a href='https://www.lightningdesignsystem.com/components/page-headers/'>
*         https://www.lightningdesignsystem.com/components/page-headers/
*     </a></p>
* @component: eg_PageHeader
**/
-->
<aura:component
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
    access="global"
>
    <!-- attributes -->
    <aura:attribute name="iconName" type="String" default="partners" access="global" />
    <aura:attribute name="iconType" type="String" default="standard" access="global" />
    <aura:attribute name="mainTitle" type="String" default="Title" access="global" />
    <aura:attribute name="subTitle" type="String" default="Sub-Title" access="global" />
    <!-- private attributes -->
    <!-- handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <!-- events -->
    <!-- elements -->
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-opportunity" title="opportunity">
                            <lightning:icon iconName="{!v.iconType + ':' + v.iconName}" alternativeText="{!v.iconName}" />
                        </span>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span class="slds-page-header__title slds-truncate" title="{!v.mainTitle}">{!v.mainTitle}</span>
                                </h1>
                            </div>
                        </div>
                        <p class="slds-page-header__name-meta">{!v.subTitle}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

eg_PageHeader.css

.THIS .slds-page-header__name-title {
    /**
    .THIS gets converted to the name of this component
    and is applied to the base element of the component.
    So .THIS .slds-page-header__name-title
    translates to the element with the css class of slds-page-header__name-title
    somewhere within this component (and its children), but no where else.
    **/
}

eg_PageHeader.design

<design:component>
    <design:attribute name='iconName' label='Icon Name' description='Name of icon from https://www.lightningdesignsystem.com/icons' default='partners' />
    <design:attribute name='iconType' label='Icon Type' description='' default='standard'
        datasource="action,custom,doctype,standard,utility"
    />
    <design:attribute name='mainTitle' label='Main Title' description='Main title of the header' default='Header' />
    <design:attribute name='subTitle' label='Sub Title' description='Sub Title of the header' default='Sub-Header' />
</design:component>

eg_PageHeader.svg

eg_PageHeaderController.js

({
	init : function(component, event, helper){
		//$A.log('Component initialized');
		helper.initializeComponent(component, helper);
	}
})

eg_PageHeaderHelper.js

({
	initializeComponent : function(component, helper) { // eslint-disable-line
		//-- eslint-disable-line is to avoid complaints we are not using arguments
		//-- component and helper are included as good practice
		//-- so they are available when they are needed

		//-- do any initialization here
	}
})