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

<?xml version="1.0" encoding="utf-8"?>
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>contact support and ask button</title>
  <desc>Created with Sketch.</desc>
  <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="matrix(0.7, 0, 0, 0.7, 0, 0)">
	<g id="fallback" fill="#62B7ED">
	  <path d="M0,0 L200,0 L200,200 L0,200 L0,0 Z M107.708509,47.4360485 L99.8331865,85.6876166 C99.8331865,86.8126628 100.958233,87.9377089 102.645802,87.9377089 L143.147462,87.9377089 C145.960078,87.9377089 147.647647,91.3128472 146.522601,93.5629395 L102.083279,166.128414 C100.39571,170.066076 94.770479,168.378507 94.770479,164.440845 L102.645802,119.439 C102.645802,118.313954 101.520756,118.876477 99.8331865,118.876477 L57.0814339,118.876477 C54.2688186,118.876477 52.0187264,114.376293 53.7062956,112.1262 L100.39571,45.7484793 C102.645802,42.373341 107.708509,43.4983871 107.708509,47.4360485 L107.708509,47.4360485 Z" id="Shape"/>
	</g>
  </g>
</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
	}
})