Base Lightning Components Considerations

Many of the base Lightning components are still evolving and the following considerations can help you while you’re building your apps.

lightning:buttonMenu

This component contains menu items that are created only if the button is triggered. You can’t reference the menu items during initialization or if the button isn’t triggered yet.

lightning:input

Fields for percentage and currency input must specify a step increment of 0.01 as required by the native implementation.

1<lightning:input type="number" name="percentVal" label="Enter a percentage value" formatter="percent" step="0.01" />
2<lightning:input type="number" name="currencyVal" label="Enter a dollar amount" formatter="currency" step="0.01" />

When working with checkboxes, radio buttons, and toggle switches, use aura:id to group and traverse the array of components. Grouping them enables you to use get("v.checked") to determine which elements are checked or unchecked without reaching into the DOM. You can also use the name and value attributes to identify each component during the iteration. The following example groups three checkboxes together using aura:id.

1<aura:component>
2    <form>
3      <fieldset>
4        <legend>Select your favorite color:</legend>
5        <lightning:input type="checkbox" label="Red" 
6            name="color1" value="1" aura:id="colors"/>
7        <lightning:input type="checkbox" label="Blue" 
8            name="color2" value="2" aura:id="colors"/>
9        <lightning:input type="checkbox" label="Green" 
10            name="color3" value="3" aura:id="colors"/>
11      </fieldset>
12    <lightning:button label="Submit" onclick="{!c.submitForm}"/>
13    </form>
14</aura:component>

In your client-side controller, you can retrieve the array using cmp.find("colors") and inspect the checked values.

When working with type="file", you must provide your own server-side logic for uploading files to Salesforce. Read the file using the FileReader HTML object, and then encode the file contents before sending them to your Apex controller. In your Apex controller, you can use the EncodingUtil methods to decode the file data. For example, you can use the Attachment object to upload files to a parent object. In this case, you pass in the base64 encoded file to the Body field to save the file as an attachment in your Apex controller.

Uploading files using this component is subject to regular Apex controller limits, which is 1 MB. To accommodate file size increase due to base64 encoding, we recommend that you set the maximum file size to 750 KB. You must implement chunking for file size larger than 1 MB. Files uploaded via chunking are subject to a size limit of 4 MB. For more information, see the Apex Developer Guide. Alternatively, you can use lightning:fileUpload to upload files directly to records.

lightning:tab

This component creates its body during runtime. You can’t reference the component during initialization. Referencing the component using aura:id can return unexpected results, such as the component returning an undefined value when implementing cmp.find("myComponent").

lightning:tabset

When you load more tabs than can fit the width of the viewport, the tabset provides navigation buttons that scrolls horizontally to display the overflow tabs.