Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Creating App Templates

An app template bootstraps the loading of the framework and the app. The default template is aura:template.

Customize the default template by creating your own component that extends the default template. For example, the Aura Note sample app has a auranote:template template that extends aura:template. auranote:template looks like:

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component isTemplate="true" extends="aura:template">
2    <aura:set attribute="title" value="Aura Notes"/>
3    ...    
4</aura:component>

Note how the component extends aura:template and sets the title attribute using aura:set. Take a look at the aura:template documentation to see the other template attributes that you can customize.

A template must have the isTemplate system attribute in the <aura:component> tag set to true. This informs the framework to allow restricted items, such as <script> tags, which aren't allowed in regular components.

The notes.app file points at the custom template by setting the template system attribute in <aura:application>.

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:application template="auranote:template">
2    ...    
3</aura:application>

JavaScript Libraries

To use a JavaScript library, you can reference it in your app's template or include a <script> tag in the .app file.

To add a JavaScript library to your app’s template, use aura:set to set the extraScriptTags attribute in the template component. This sets the extraScriptTags attribute in aura:template, which your app's template extends.

For example, the Aura Note sample app uses ckeditor.js, which is a third-party JavaScript library. The auranote:template includes this markup to include the library.

1swfobject.registerObject("clippy.codeblock-2", "9");<aura:set attribute="extraScriptTags">
2    <script type="text/javascript" src="/aura/ckeditor/ckeditor.js"></script>
3</aura:set>

You can use multiple <script> tags to include more than one library. For example:

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:set attribute="extraScriptTags">
2    <script type="text/javascript" src="/aura/ckeditor/ckeditor.js"></script>
3    <script type="text/javascript" src="/aura/codemirror/codemirror.js"></script>
4</aura:set>

External CSS

To use an external style sheet, you must link to it in your app's template. Use aura:set to set the extraStyleTags attribute in the template component. This sets the extraStyleTags attribute in aura:template, which your app's template extends.

For example:

1swfobject.registerObject("clippy.codeblock-4", "9");<aura:set attribute="extraStyleTags">
2        <link href="/aura/external/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" />
3    </aura:set>

You can link to multiple external style sheets. For example:

1swfobject.registerObject("clippy.codeblock-5", "9");<aura:set attribute="extraStyleTags">
2        <link href="/aura/external/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" />
3        <link href="/aura/external/morecss/morecss.css" rel="stylesheet" type="text/css" />
4    </aura:set>

You can also use inline style in your template, but we recommend using an external style sheet instead. To use inline style, use aura:set to set the inlineStyle attribute in the template component. For example:

1swfobject.registerObject("clippy.codeblock-6", "9");<aura:set attribute="inlineStyle">
2        <style>
3            body {
4             background-color: #6cc4e3;
5            }
6        </style>
7    </aura:set>