-
Notifications
You must be signed in to change notification settings - Fork 5
Snippets
Aura Helper has more than 200 snippets for Aura, JavaScript and SLDS to create to many code units in seconds:
Create Aura Attribute Code Unit (aura:attribute)
-
Activation:
aura.attribute
<aura:attribute name="${1:name}" type="${2:type}" default="${3:defValue}" access="${4:access}" description="${5:description}"/>
Create Aura Handler Code Unit (aura:handler)
-
Activation:
aura.handler
<aura:handler name="${1:name}" value="${2:value}" action="{!c.${3:jsAction}}" />
Create Initialization Component Aura Handler Code Unit (aura:handler)
[Documentation](https://developer.salesforce.com/docs/component-library/bundle/aura:valueInit/documentation
-
Activation:
aura.initHandler
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
Create Aura Component Event Handler Code Unit (aura:handler)
-
Activation:
aura.eventHandler
<aura:handler name="${1:name}" event="c:${2:event}" action="{!c.${3:jsAction}}" />
Create Aura Application Event Handler Code Unit (aura:handler)
-
Activation:
aura.appEventHandler
<aura:handler event="c:${1:event}" action="{!c.${2:jsAction}}"/>
Create Aura Location Change Handler Code Unit (aura:handler)
-
Activation:
aura.onLocationChange
<aura:handler event="aura:locationChange" action="{!c.${1:jsAction}}"/>
Create Aura System Error Handler Code Unit (aura:handler)
-
Activation:
aura.onSystemError
<aura:handler event="aura:systemError" action="{!c.${1:jsAction}}"/>
Create Aura Value Changed Handler Code Unit (aura:handler)
-
Activation:
aura.onValueChanged
<aura:handler name="change" value="{!${2:value}}" action="{!c.${3:jsAction}}"/>
Create Aura Component Destroy Handler Code Unit (aura:handler)
-
Activation:
aura.onDestroy
<aura:handler name="destroy" value="{!this}" action="{!c.${1:jsAction}}"/>
Create Aura Component Render Handler Code Unit (aura:handler)
-
Activation:
aura.onRender
<aura:handler name="render" value="{!this}" action="{!c.${1:jsAction}}"/>
Create Aura Event Registration Code Unit (aura:registerEvent)
-
Activation:
aura.registerEvent
<aura:registerEvent name="${1:name}" type="c:${2:type}" />
Create Aura Render If Code Unit (aura:renderIf)
-
Activation:
aura.renderIf
<aura:renderIf isTrue="{!${1:isTrue}}">
${0:<!-- Code when is true -->}
<aura:set attribute="else">
<!-- Code when is false -->
</aura:set>
</aura:renderIf>
Create Aura If Code Unit (aura:if)
-
Activation:
aura.if
<aura:if isTrue="{!${1:isTrue}}">
${0:<!-- Code when is true -->}
<aura:set attribute="else">
<!-- Code when is false -->
</aura:set>
</aura:if>
Create Aura Iteration Code Unit (aura:iteration)
-
Activation:
aura.iteration
<aura:iteration items="{!${1:items}}" var="${2:item}">
${0:<!-- Code for repeat -->}
</aura:iteration>
Create ltng Required Code Unit for CSS Styles (ltng:require)
-
Activation:
ltng.style
<ltng:require styles="${1:cssStyle}">
Create ltng Required Code Unit for load scripts (ltng:require)
-
Activation:
ltng.script
<ltng:require script="${1:cssStyle}">
Create ltng Required Code Unit for CSS Styles with afterScriptsLoaded attribute (ltng:require)
-
Activation:
ltng.styleAfterLoad
<ltng:require styles="${1:cssStyle}">
Create ltng Required Code Unit for load scripts with afterScriptsLoaded attribute (ltng:require)
-
Activation:
ltng.scriptAfterLoad
<ltng:require script="${1:cssStyle}" afterScriptsLoaded="{!c.${2:jsAction}}">
Create Force Record View Code Unit (force:recordView)
-
Activation:
force.recordView
<force:recordView recordId="{!${1:recordId}}" />
Create Force Record Edit Code Unit (force:recordEdit)
-
Activation:
force.recordEdit
<force:recordEdit aura:id="${1:auraId}" recordId="{!${2:recordId}}"/>
Create Force Record Data Code Unit (force:recordData)
-
Activation:
force.recordData
<force:recordData aura:id="${1:auraId}" recordId="{!${2:recordId}}" fields="${3:fields}" targetFields="${4:targetFields}" targetError="${5:targetError}"/>
Create Force Output Field Code Unit (force:outputField)
-
Activation:
force.outputField
<force:outputField value="{!${1:field}}"/>
Create Force Input Field Code Unit (force:inputField)
-
Activation:
force.inputField
<force:inputField value="{!${1:field}}"/>
Create Force Canvas App Code Unit (force:canvasApp)
-
Activation:
force.canvasApp
<force:canvasApp developerName="${1:devName}" namespacePrefix="${2:nsPrefix}"/>
Create Force Chatter Feed Code Unit (forceChatter:feed)
-
Activation:
forceChatter.feed
<forceChatter:feed type="${1:type}"/>
Create Force Chatter Publisher Code Unit (forceChatter:publisher)
-
Activation:
forceChatter.publisher
<forceChatter:publisher context="${1:context}"/>
Create Force Community App Launcher Code Unit (forceCommunity:appLauncher)
-
Activation:
forceCommunity.appLauncher
<forceCommunity:appLauncher/>
Create Force Community Notifications Code Unit (forceCommunity:notifications)
-
Activation:
forceCommunity.notifications
<forceCommunity:notifications/>
Create Force Community Route Link Code Unit (forceCommunity:routeLink)
-
Activation:
forceCommunity.routeLink
<forceCommunity:routeLink id="{!${1:id}}" class="{!${2:cssClass}}" title="${3:title}" label="${4:label}" routeInput="{!${5:routeInput}}" onClick="{!c.${6:jsAction}}"/>
Create Force Community Wave Dashboard Code Unit (forceCommunity:waveDashboard)
-
Activation:
forceCommunity.waveDashboard
<forceCommunity:waveDashboard dashboardId="{!${1:dashboardId}}"/>
Create Lightning Accordion Code Unit (lightning:accordion)
-
Activation:
ltn.accordion
<lightning:accordion aura:id="${1:auraId}" activeSectionName="${2:activeSection}">
$0
</lightning:accordion>
Create Lightning Accordion Section Code Unit (lightning:accordionSection)
-
Activation:
ltn.accordionSection -
Alternative Activation:
ltn.accSection
<lightning:accordionSection name="${1:sectionName}" label="${2:sectionLabel}">
<aura:set attribute="actions">
$0
</aura:set>
<aura:set attribute="body">
</aura:set>
</lightning:accordionSection>
Create Lightning Avatar Code Unit (lightning:avatar)
-
Activation:
ltn.avatar
<lightning:avatar src="${1:imgSource}" initials="${2:initials}" fallbackIconName="${3:iconName}" alternativeText="${4:altText}"/>
Create Lightning Breadcrums Section Code Unit (lightning:breadcrumbs)
-
Activation:
ltn.breadcrumbs
<lightning:breadcrumbs>
$0
</lightning:breadcrumbs>
Create Lightning Breadcrum Code Unit (lightning:breadcrumb)
-
Activation:
ltn.breadcrumb
<lightning:breadcrumb label="${1:label}" href="${2:path}"/>
Create Lightning Button Code Unit (lightning:button)
-
Activation:
ltn.button
<lightning:button variant="${1:variant}" label="${2:label}" title="${3:title}" onclick="{!c.${4:jsAction}}" />
Create Lightning Button Brand Code Unit (lightning:button)
-
Activation:
ltn.buttonBrand
<lightning:button variant="brand" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />
Create Lightning Button Neutral Code Unit (lightning:button)
-
Activation:
ltn.buttonNeutral
<lightning:button label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />
Create Lightning Button Destructive Code Unit (lightning:button)
-
Activation:
ltn.buttonDestructive
<lightning:button variant="destructive" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />
Create Lightning Button Success Code Unit (lightning:button)
-
Activation:
ltn.buttonSuccess
<lightning:button variant="success" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />
Create Lightning Button Group Code Unit (lightning:buttonGroup)
-
Activation:
ltn.buttonGroup -
Alternative Activation:
ltn.buttonGrp
<lightning:buttonGroup>
${0:<!-- Put your buttons here -->}
</lightning:buttonGroup>
Create Lightning Button Icon Code Unit (lightning:buttonIcon)
-
Activation:
ltn.buttonIcon
<lightning:buttonIcon iconName="${1:iconName}" variant="${2:variant}" onclick="{!c.${3:jsAction}}" alternativeText=${4:altText}/>
Create Lightning Button Icon Stateful Code Unit (lightning:buttonIconStateful)
-
Activation:
ltn.buttonIconStateful
<lightning:buttonIconStateful iconName="${1:iconName}" selected="{!${2:selected}}" onclick="{!c.${3:jsAction}}" alternativeText=${4:altText} />
Create Lightning Button Menu Code Unit (lightning:buttonMenu)
-
Activation:
ltn.buttonMenu
<lightning:buttonMenu aura:id="${1:auraId}" onselect="{!c.${2:jsAction}}" alternativeText="${3:altText}">
${0:<!-- Put your menu items here (lightning:menuItem) -->}
</lightning:buttonMenu>
Create Lightning Button Stateful Code Unit (lightning:buttonStateful)
-
Activation:
ltn.buttonStateful
<lightning:buttonStateful labelWhenOff="${1:labelOff}" labelWhenOn="${2:labelOn}" labelWhenHover="${3:labelHover}" iconNameWhenOff="${4:iconOff}" iconNameWhenOn="${5:iconCheck}" iconNameWhenHover="${6:iconHover}" state="{!c.${7:jsAction}}" onclick="{!c.${8:jsAction}}"/>
Create Lightning Card Code Unit (lightning:card)
-
Activation:
ltn.card
<lightning:card footer="${1:cardFooter}" title="${2:cardTitle}">
<aura:set attribute="actions">
</aura:set>
${0:<!-- Put your card body here -->}
</lightning:card>
Create Lightning Carousel Code Unit (lightning:carousel)
-
Activation:
ltn.carousel
<lightning:carousel disableAutoRefresh="${1:false}" disableAutoScroll="${2:false}">
${0:<!-- Put your Carousel images here (lightning:carouselImage) -->}
</lightning:card>
Create Lightning Carousel Image Code Unit (lightning:carouselImage)
-
Activation:
ltn.carouselImage
<lightning:carouselImage src="${1:imageSource}" header="${2:imageHeader}" description="${3:imageDesc}" alternativeText="${4:altText}" href ="${5:link}">
Create Lightning Check Box Group Code Unit (lightning:checkboxGroup)
-
Activation:
ltn.checkboxGroup -
Alternative Activation:
ltn.checkboxGrp
<lightning:checkboxGroup name="${1:groupName}" label="${2:groupLabel}" options="{!${3:options}}" value="{!${4:value}}" onchange="{!c.${5:jsAction}}"/>
Create Lightning Click to Dial Service Code Unit (lightning:clickToDialService)
-
Activation:
ltn.clickToDialService
<lightning:clickToDialService aura:id="${1:auraId}"/>
Create Lightning Click to Dial Code Unit (lightning:clickToDial)
-
Activation:
ltn.clickToDial
<lightning:clickToDial value="${1:value}" recordId="{!${2:recordId}}" params="${3:parameters}"/>
Create Lightning Combobox Code Unit (lightning:combobox)
-
Activation:
ltn.combobox
<lightning:combobox name="${1:name}" label="${2:label}" value="${3:startValue}" placeholder="${4:placeholder}" options="{!${5:value}}" onchange="{!c.${6:jsAction}}"/>
Create Lightning Container Code Unit (lightning:container)
-
Activation:
ltn.container
<lightning:container aura:id="${1:auraId}" src="${2:contentSource}" onmessage="{!c.${3:jsAction}}" onerror="{!c.${4:jsAction}}"/>
Create Lightning Data Table Code Unit (lightning:datatable)
-
Activation:
ltn.datatable
<lightning:datatable keyField="${1:keyField}" data="{!${2:dataSet}}" columns="{!${3:columns}}" hideCheckboxColumn="${4:true}"/>
Create Lightning Dual List Box Code Unit (lightning:dualListbox)
-
Activation:
ltn.dualListBox
<lightning:dualListbox name="${1:listName}" label="${2:label}" sourceLabel="${3:sourceLabel}" selectedLabel="${4:selectedLabel}" fieldLevelHelp="${5:help}" options="{!${6:value}}" onchange="{!c.${7:jsAction}}"/>
Create Lightning Dynamic Icon Ellie Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconEllie
<lightning:dynamicIcon type="ellie" alternativeText="${1:altText}"/>
Create Lightning Dynamic Icon EQ Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconEQ
<lightning:dynamicIcon type="eq" option="${1:playOrStop}" alternativeText="${2:altText}"/>
Create Lightning Dynamic Icon Score Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconScore
<lightning:dynamicIcon type="score" option="${1:positiveOrNegative}" alternativeText="${2:altText}"/>
Create Lightning Dynamic Icon Strength Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconStrength
<lightning:dynamicIcon type="strength" option="${1:value}" alternativeText="${2:altText}"/>
Create Lightning Dynamic Icon Trend Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconTrend
<lightning:dynamicIcon type="trend" option="${1:neutralUpOrDown}" alternativeText="${2:altText}"/>
Create Lightning Dynamic Icon Waffle Type Code Unit (lightning:dynamicIcon)
-
Activation:
ltn.dynamicIconWaffle
<lightning:dynamicIcon type="waffle" alternativeText="${1:altText}"/>
Create Lightning File Card Code Unit (lightning:fileCard)
-
Activation:
ltn.fileCard
<lightning:fileCard fileId="{!${1:fileId}}" description="${1:description}"/>
Create Lightning File Upload Code Unit (lightning:fileUpload)
-
Activation:
ltn.fileUpload
<lightning:fileUpload name="${1:altText}" label="${2:label}" multiple="${3:false}" accept="{!${4:extensionList}}" disabled="${5:false}" recordId="{!${6:recordId}}" onuploadfinished="{!c.${7:jsAction}}"/>
Create Lightning Flexi Page Region Info Code Unit (lightning:flexipageRegionInfo)
-
Activation:
ltn.flexipageRegionInfo
<lightning:flexipageRegionInfo width="{!${1:extensionList}}"/>
Create Lightning Flow Code Unit (lightning:flow)
-
Activation:
ltn.flow
<lightning:flow aura:id="${1:auraId}" onstatuschange="{!c.${2:jsAction}}"/>
Create Lightning Formatted Address Code Unit (lightning:formattedAddress)
-
Activation:
ltn.formattedAddress
<lightning:formattedAddress street="{!${1:street}}" city="{!${2:city}}" country="{!${3:country}}" province="{!${4:province}}" postalCode="{!${5:postalCode}}"/>
Create Lightning Formatted Address With Map Code Unit (lightning:formattedAddress)
-
Activation:
ltn.formattedAddressMap
<lightning:formattedAddress street="{!${1:street}}" city="{!${2:city}}" country="{!${3:country}}" province="{!${4:province}}" postalCode="{!${5:postalCode}}" showStaticMap="true"/>
Create Lightning Formatted Date Code Unit (lightning:formattedDateTime)
-
Activation:
ltn.formattedDate
<lightning:formattedDateTime value="{!${1:timeInMillis}}" year="${2:numeric}" month="${3:short}" day="${4:2-digit}" weekday="${5:long}"/>
Create Lightning Formatted Time Code Unit (lightning:formattedDateTime)
-
Activation:
ltn.formattedTime
<lightning:formattedDateTime value="{!${1:timeInMillis}}" hour="${2:2-digit}" minute="${3:2-digit}" second="${4:2-digit}" hour12="${5:false}"/>
Create Lightning Formatted Date Time Code Unit (lightning:formattedDateTime)
-
Activation:
ltn.formattedDateTime
<lightning:formattedDateTime value="{!${1:timeInMillis}}" year="${2:numeric}" month="${3:numeric}" day="${4:numeric}" hour="${5:2-digit}" minute="${6:2-digit}" second="${7:2-digit}" hour12="${8:false}"/>
Create Lightning Formatted Email Code Unit (lightning:formattedEmail)
-
Activation:
ltn.formattedEmail
<lightning:formattedEmail value="{!${1:email}}" />
Create Lightning Formatted Location Code Unit (lightning:formattedLocation)
-
Activation:
ltn.formattedLocation
<lightning:formattedLocation latitude="{!${1:latitude}}" longitude="{!${2:longitude}}"/>
Create Lightning Formatted Name Code Unit (lightning:formattedName)
-
Activation:
ltn.formattedName
<lightning:formattedName aura:id="${1:auraId}" firstName="{!${2:firstName}}" middleName="{!${3:middleName}}" lastName="{!${4:lastName}}" informalName="{!${5:informalName}}" suffix="{!${6:suffix}}" salutation="{!${6:salutation}}"/>
Create Lightning Formatted Name Short Code Unit (lightning:formattedName)
-
Activation:
ltn.formattedNameShort
<lightning:formattedName aura:id="${1:auraId}" firstName="{!${2:firstName}}" middleName="{!${3:middleName}}" lastName="{!${4:lastName}}" informalName="{!${5:informalName}}" suffix="{!${6:suffix}}" salutation="{!${6:salutation}}" format="short"/>
Create Lightning Formatted Decimal Number Code Unit (lightning:formattedNumber)
-
Activation:
ltn.formattedNumberDecimal
<lightning:formattedNumber value="{!${1:value}}" minimumSignificantDigits="{!${2:minimumSignificantDigits}}" style="decimal"/>
Create Lightning Formatted Currency Code Unit (lightning:formattedNumber)
-
Activation:
ltn.formattedNumberCurrency
<lightning:formattedNumber value="{!${1:value}}" currencyCode="{!${3:currencyCode}}" currencyDisplayAs="${4:code}" style="currency"/>
Create Lightning Formatted Percent Code Unit (lightning:formattedNumber)
-
Activation:
ltn.formattedNumberPercent
<lightning:formattedNumber value="{!${1:value}}" minimumSignificantDigits="{!${2:minimumSignificantDigits}}" style="percent"/>
Create Lightning Formatted Phone Code Unit (lightning:formattedPhone)
-
Activation:
ltn.formattedPhone
<lightning:formattedPhone value="{!${1:value}}"/>
Create Lightning Formatted Rich Text Code Unit (lightning:formattedRichText)
-
Activation:
ltn.formattedRichText
<lightning:formattedRichText value="{!${1:value}}"/>
Create Lightning Formatted Text Code Unit (lightning:formattedText)
-
Activation:
ltn.formattedText
<lightning:formattedText value="{!${1:value}}" linkify="${2:true}"/>
Create Lightning Formatted Text Code Unit (lightning:formattedUrl)
-
Activation:
ltn.formattedUrl
<lightning:formattedUrl value="{!${1:value}}"/>
Create Lightning Help Text Code Unit (lightning:helptext)
-
Activation:
ltn.helptext
<lightning:helptext content="${1:helpText}"/>
Create Lightning Icon Code Unit (lightning:icon)
-
Activation:
ltn.icon
<lightning:icon iconName="${1:iconName}" alternativeText="${2:altText}" size="${3:size}"/>
Create Lightning Input Date Code Unit (lightning:input)
-
Activation:
ltn.inputDate
<lightning:input type="date" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input DateTime Code Unit (lightning:input)
-
Activation:
ltn.inputDateTime
<lightning:input type="datetime" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Time Code Unit (lightning:input)
-
Activation:
ltn.inputTime
<lightning:input type="time" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Color Code Unit (lightning:input)
-
Activation:
ltn.inputColor
<lightning:input type="color" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input File Code Unit (lightning:input)
-
Activation:
ltn.inputFile
<lightning:input type="file" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" multiple="${4:false}" accept="${5:extensionList}" onchange="{!c.${6:jsAction}}"/>
Create Lightning Input Text Code Unit (lightning:input)
-
Activation:
ltn.inputText
<lightning:input aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Email Code Unit (lightning:input)
-
Activation:
ltn.inputEmail
<lightning:input type="email" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Password Code Unit (lightning:input)
-
Activation:
ltn.inputPassword -
Alternative Activation:
ltn.inputPwd
<lightning:input type="password" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Telephone Code Unit (lightning:input)
-
Activation:
ltn.inputTelephone
<lightning:input type="tel" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input URL Code Unit (lightning:input)
-
Activation:
ltn.inputUrl
<lightning:input type="url" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Number Code Unit (lightning:input)
-
Activation:
ltn.inputNumber
<lightning:input type="number" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>
Create Lightning Input Checkbox Code Unit (lightning:input)
-
Activation:
ltn.inputCheckbox -
Alternative Activation:
ltn.inputChk
<lightning:input type="checkbox" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>
Create Lightning Input Checkbox Button Code Unit (lightning:input)
-
Activation:
ltn.inputCheckboxButton -
Alternative Activation:
ltn.inputChkBtn
<lightning:input type="checkbox-button" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>
Create Lightning Input Toggle Code Unit (lightning:input)
-
Activation:
ltn.inputToggle
<lightning:input type="toggle" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>
Create Lightning Input Radio Button Code Unit (lightning:input)
-
Activation:
ltn.inputRadio
<lightning:input type="radio" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="${4:value}"/>
Create Lightning Input Search Code Unit (lightning:input)
-
Activation:
ltn.inputSearch
<lightning:input type="search" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}"/>
Create Lightning Input Address Code Unit (lightning:inputAddress)
-
Activation:
ltn.inputAddress
<lightning:inputAddress addressLabel="${1:addressLabel}" streetLabel="${2:streetLabel}" cityLabel="${3:cityLabel}" countryLabel="${4:countryLabel}" provinceLabel="${5:provinceLabel}" postalCodeLabel="${6:postalCodeLabel}" street="{!${7:street}}" city="{!${8:city}}" country="{!${9:country}}" province="{!${10:province}}" postalCode="{!${11:postalCode}}" fieldLevelHelp="${12:helpText}"/>
Create Lightning Input Field Code Unit (lightning:inputField)
-
Activation:
ltn.inputField
<lightning:inputField fieldName="${1:fieldApiName}"/>
Create Lightning Input Location Code Unit (lightning:inputLocation)
-
Activation:
ltn.inputLocation
<lightning:inputLocation label="${1:label}" latitude="${2:latitude}" longitude="${3:longitude}"/>
Create Lightning Input Name Code Unit (lightning:inputName)
-
Activation:
ltn.inputName
<lightning:inputName aura:id="${1:auraId}" label="${2:label}" firstName="{!${3:firstName}}" middleName="{!${4:middleName}}" lastName="{!${5:lastName}}" informalName="{!${6:informalName}}" suffix="{!${7:suffix}}" salutation="{!${8:salutation}}" options="{!${9:salutationOptions}}"/>
Create Lightning Input Rich Text Code Unit (lightning:inputRichText)
-
Activation:
ltn.inputRichText
<lightning:inputRichText value="{!${1:value}}" placeholder="{!${2:placeholder}}"/>
Create Lightning Input Rich Text With Bottom Toolbar Code Unit (lightning:inputRichText)
-
Activation:
ltn.inputRichTextBottom
<lightning:inputRichText value="{!${1:value}}" placeholder="{!${2:placeholder}}" variant="bottom-toolbar"/>
Create Lightning Simple Layout Code Unit (lightning:layout)
-
Activation:
ltn.layout
<lightning:layout>
${0:<!-- Put the content Here -->}
</lightning:layout>
Create Lightning Layout with Horizontal Align Space and Vertical Align Center Code Unit (lightning:layout)
-
Activation:
ltn.layoutSpaceCenter
<lightning:layout horizontalAlign="space" verticalAlign="center">
${0:<!-- Put the content Here -->}
</lightning:layout>
Create Lightning Layout with Horizontal Align Space and Vertical Align Stretch Code Unit (lightning:layout)
-
Activation:
ltn.layoutSpaceStretch
<lightning:layout horizontalAlign="space" verticalAlign="stretch">
${0:<!-- Put the content Here -->}
</lightning:layout>
Create Lightning Layout with Horizontal Align Spread and Vertical Align Center Code Unit (lightning:layout)
-
Activation:
ltn.layoutSpreadCenter
<lightning:layout horizontalAlign="spread" verticalAlign="center">
${0:<!-- Put the content Here -->}
</lightning:layout>
Create Lightning Layout with Horizontal Align Spread and Vertical Align Stretch Code Unit (lightning:layout)
-
Activation:
ltn.layoutSpreadStretch
<lightning:layout horizontalAlign="spread" verticalAlign="stretch">
${0:<!-- Put the content Here -->}
</lightning:layout>
Create Lightning Basic Layout Item Code Unit (lightning:layoutItem)
-
Activation:
ltn.layoutItem
<lightning:layoutItem size="${1:size}" padding="around-small">
${0:<!-- Put the content Here -->}
</lightning:layoutItem>
Create Lightning List View Code Unit (lightning:listView)
-
Activation:
ltn.listView
<lightning:listView aura:id="${1:auraId}" objectApiName="${2:objApiName}" listName="${3:listName}" rows="${4:rowsNumber}" showSearchBar="${5:true}" showActionBar="${6:false}" enableInlineEdit="${7:true}" showRowLevelActions="${8:false}"/>
Create Lightning City Map Code Unit (lightning:map)
-
Activation:
ltn.map
<lightning:map mapMarkers="{!${1:placeholder}}" center="{!${2:center}}" zoomLevel="{!${3:zoomLevel}}" markersTitle="{!${4:markersTitle}}" showFooter="${5:true}"/>
Create Lightning Menu Item Code Unit (lightning:menuItem)
-
Activation:
ltn.menuItem
<lightning:menuItem label="${1:label}" value="${2:value}" iconName="${3:iconName}"/>
Create Lightning Menu Item for URL Code Unit (lightning:menuItem)
-
Activation:
ltn.menuItemUrl
<lightning:menuItem label="${1:label}" href="${2:url}" iconName="${3:iconName}"/>
Create Lightning Navigation Service Code Unit (lightning:navigation)
-
Activation:
ltn.navigation
<lightning:navigation aura:id="${1:auraId}"/>
Create Lightning Navigation Item API Code Unit (lightning:navigationItemAPI)
-
Activation:
ltn.navigationItemApi
<lightning:navigationItemAPI aura:id="${1:auraId}"/>
Create Lightning Omni Toolkit API Code Unit (lightning:omniToolkitAPI)
-
Activation:
ltn.omniToolkitApi
<lightning:omniToolkitAPI aura:id="${1:auraId}"/>
Create Lightning Output Field Code Unit (lightning:outputField)
-
Activation:
ltn.outputField
<lightning:outputField fieldName="${1:fieldAPIName}"/>
Create Lightning Overlay Library Code Unit (lightning:overlayLibrary)
-
Activation:
ltn.overlayLibrary
<lightning:overlayLibrary aura:id="${1:auraId}"/>
Create Lightning Path Code Unit (lightning:path)
-
Activation:
ltn.path
<lightning:path aura:id="${1:auraId}" recordId="{!${2:recordId}}" variant="${3:linear}" hideUpdateButton="${4:false}" onselect="{!c.${5:jsAction}}"/>
Create Lightning Picklist Path Code Unit (lightning:picklistPath)
-
Activation:
ltn.picklistPath
<lightning:picklistPath aura:id="${1:auraId}" recordId="{!${2:recordId}}" variant="${3:linear}" picklistFieldApiName="${4:fieldAPIName}" onselect="{!c.${5:jsAction}}"/>
Create Lightning Pill Code Unit (lightning:pill)
-
Activation:
ltn.pill
<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}"/>
Create Lightning Pill URL Code Unit (lightning:pill)
-
Activation:
ltn.pillUrl
<lightning:pill label="${1:label}" href="${2:url}"/>
Create Lightning Pill with Avatar Code Unit (lightning:pill)
-
Activation:
ltn.pillAvatar
<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}">
<aura:set attribute="media">
<lightning:avatar src="${4:avatarSource}" fallbackIconName="${5:icon}" variant="${6:circle}" alternativeText="${7:altText}"/>
</aura:set>
</lightning:pill>
Create Lightning Pill URL with Avatar Code Unit (lightning:pill)
-
Activation:
ltn.pillAvatarUrl
<lightning:pill label="${1:label}" href="${2:url}">
<aura:set attribute="media">
<lightning:avatar src="${3:avatarSource}" fallbackIconName="${4:icon}" variant="${5:circle}" alternativeText="${6:altText}"/>
</aura:set>
</lightning:pill>
Create Lightning Pill with Icon Code Unit (lightning:pill)
-
Activation:
ltn.pillIcon
<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}">
<aura:set attribute="media">
<lightning:icon iconName="${4:icon}" alternativeText="${5:altText}"/>
</aura:set>
</lightning:pill>
Create Lightning Pill URL with Icon Code Unit (lightning:pill)
-
Activation:
ltn.pillIconUrl
<lightning:pill label="${1:label}" href="${2:url}">
<aura:set attribute="media">
<lightning:icon iconName="${3:icon}" alternativeText="${4:altText}"/>
</aura:set>
</lightning:pill>
Create Lightning Pill Container Code Unit (lightning:pillContainer)
-
Activation:
ltn.pillContainer
<lightning:pillContainer items="{!${1:items}}"/>
Create Lightning Progress Bar Code Unit (lightning:progressBar)
-
Activation:
ltn.progressBar
<lightning:progressBar value="{!${1:value}}" size="{!${2:medium}}"/>
Create Lightning Progress Bar Circular Code Unit (lightning:progressBar)
-
Activation:
ltn.progressBarCircular
<lightning:progressBar value="{!${1:value}}" size="{!${2:medium}}" variant="circular"/>
Create Lightning Progress Indicator Code Unit (lightning:progressIndicator)
-
Activation:
ltn.progressIndicator
<lightning:progressIndicator currentStep="{!${1:currentStep}}" type="base" variant="base">
${0:<!-- Put yout Progress Steps here (lightning:progressStep) -->}
</lightning:progressIndicator>
Create Lightning Progress Indicator like Path Code Unit (lightning:progressIndicator)
-
Activation:
ltn.progressIndicatorPath
<lightning:progressIndicator currentStep="{!${1:currentStep}}" type="path" variant="base">
${0:<!-- Put yout Progress Steps here (lightning:progressStep) -->}
</lightning:progressIndicator>
Create Lightning Quick Action API Code Unit (lightning:quickActionAPI)
-
Activation:
ltn.quickActionApi
<lightning:quickActionAPI aura:id="${1:auraId}"/>
Create Lightning Quip Card Code Unit (lightning:quipCard)
-
Activation:
ltn.quipCard
<lightning:quipCard parentRecordId="{!${1:parentRecordId}}"/>
Create Lightning Radio Group Code Unit (lightning:radioGroup)
-
Activation:
ltn.radioGroup
<lightning:radioGroup name="${1:name}" label="${2:label}" options="{!${3:options}}" value="{!${4:value}}" type="radio"/>
Create Lightning Radio Group like Button Code Unit (lightning:radioGroup)
-
Activation:
ltn.radioGroupBtn
<lightning:radioGroup name="${1:name}" label="${2:label}" options="{!${3:options}}" value="{!${4:value}}" type="button"/>
Create Lightning Record Edit Form for Create a new record Code Unit (lightning:recordEditForm)
-
Activation:
ltn.recordEditFormForCreate
<lightning:recordEditForm objectApiName="${1:objectApiName}" onload="{!c.${2:jsAction}}" onsubmit="{!c.${3:jsAction}}" onsuccess="{!c.${4:jsAction}}"/>
${0:<!-- Put the input fields here (lightning:inputField) -->}
</lightning:recordEditForm>
Create Lightning Record Edit Form for Edit a record Code Unit (lightning:recordEditForm)
-
Activation:
ltn.recordEditForm
<lightning:recordEditForm recordId="{!${1:recordId}}" objectApiName="${2:objectApiName}" onload="{!c.${3:jsAction}}" onsubmit="{!c.${4:jsAction}}" onsuccess="{!c.${5:jsAction}}"/>
${0:<!-- Put the input fields here (lightning:inputField) -->}
</lightning:recordEditForm>
Create Lightning Record Form Code Unit (lightning:recordForm)
-
Activation:
ltn.recordForm
<lightning:recordForm recordId="{!${1:recordId}}" objectApiName="{!${2:objectApiName}}" layoutType="${3:layoutType}" columns="${4:columns}" mode="${5:mode}"/>
Create Lightning Record Form Code Unit (lightning:recordViewForm)
-
Activation:
ltn.recordViewForm
<lightning:recordViewForm recordId="{!${1:recordId}}" objectApiName="{!${2:objectApiName}}">
${0:<!-- Put the output fields here (lightning:outputField) -->}
</lightning:recordViewForm>
Create Lightning Relative Date Time Code Unit (lightning:relativeDateTime)
-
Activation:
ltn.relativeDateTime
<lightning:relativeDateTime value="{!${1:value}}"/>
Create Lightning Select Code Unit (lightning:select)
-
Activation:
ltn.select
<lightning:recordViewForm aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="${4:selectedValue}">
<aura:iteration items="{!${5:options}}" var="option">
<option text="{!${6:option.label}}" value="{!${7:option.id}}" selected="{!${8:option.selected}}"/>
</aura:iteration>
</lightning:recordViewForm>
Create Lightning Slider Code Unit (lightning:slider)
-
Activation:
ltn.slider
<lightning:slider label="${1:label}" value="{!${2:value}}" size="${3:medium}"/>
Create Lightning Spinner Code Unit (lightning:spinner)
-
Activation:
ltn.spinner
<lightning:spinner alternativeText="${1:altText}" size="${2:medium}"/>
Create Lightning Tab Code Unit (lightning:tab)
-
Activation:
ltn.tab
<lightning:tab label="${1:label}" id="${2:tabId}">
${0:<!-- Put your tab content here -->}
</lightning:tab>
Create Lightning Tab Set Code Unit (lightning:tabset)
-
Activation:
ltn.tabset
<lightning:tabset selectedTabId="${1:tabId}">
${0:<!-- Put your tabs here -->}
</lightning:tabset>
Create Lightning Text Area Code Unit (lightning:textArea)
-
Activation:
ltn.textArea
<lightning:textArea name="${1:name}" label="${2:label}" value="{!${3:value}}" placeholder="${4:placeholder}"/>
Create Lightning Tile Code Unit (lightning:tile)
-
Activation:
ltn.tile
<lightning:tile label="${1:label}" href="${2:url}">
${0:<!-- Put your content here -->}
</lightning:tile>
Create Lightning Tile with Icon Code Unit (lightning:tile)
-
Activation:
ltn.tileIcon
<lightning:tile label="${1:label}" href="${2:url}">
<aura:set attribute="media">
<lightning:icon iconName="${2:iconName}"/>
</aura:set>
${0:<!-- Put your content here -->}
</lightning:tile>
Create Lightning Tile with Avatar Code Unit (lightning:tile)
-
Activation:
ltn.tileAvatar
<lightning:tile label="${1:label}" href="${2:url}">
<aura:set attribute="media">
<lightning:avatar src="${3:avatarSource}" fallbackIconName="${4:iconName}" alternativeText="${5:altText}"/>
</aura:set>
${0:<!-- Put your content here -->}
</lightning:tile>
Create Lightning Tree Code Unit (lightning:tree)
-
Activation:
ltn.tree
<lightning:tree header="${1:header}" items={!${2:items}}/>
Create Lightning Tree Grid Code Unit (lightning:treeGrid)
-
Activation:
ltn.treeGrid
<lightning:treeGrid columns="{!${1:columns}}" data="{!${2:data}}" expandedRows="{!${3:expandedRows}}" keyField="${4:keyField}"/>
Create Lightning Unsaved Changes Code Unit (lightning:unsavedChanges)
-
Activation:
ltn.unsavedChanges
<lightning:unsavedChanges aura:id="${1:auraId}" onsave="{!c.${2:jsAction}}" ondiscard="{!c.${3:jsAction}}"/>
Create Lightning Utility Bar API Code Unit (lightning:utilityBarAPI)
-
Activation:
ltn.utilityBarApi
<lightning:utilityBarAPI aura:id="${1:auraId}"/>
Create Lightning Vertical Navigation Code Unit (lightning:verticalNavigation)
-
Activation:
ltn.verticalNavigation
<lightning:verticalNavigation selectedItem="{!${1:selectedItem}}"/>
${0:<!-- Put your Navigation Sections and Items here -->}
</lightning:verticalNavigation>
Create Lightning Vertical Navigation Item Code Unit (lightning:verticalNavigationItem)
-
Activation:
ltn.verticalNavigationItem
<lightning:verticalNavigationItem label="${1:label}" name="${2:name}"/>
Create Lightning Vertical Navigation Item Badge Code Unit (lightning:verticalNavigationItemBadge)
-
Activation:
ltn.verticalNavigationItemBadge
<lightning:verticalNavigationItemBadge label="${1:label}" name="${2:name}" badgeCount="{!${3:badgeCount}}"/>
Create Lightning Vertical Navigation Item Icon Code Unit (lightning:verticalNavigationItemIcon)
-
Activation:
ltn.verticalNavigationItemIcon
<lightning:verticalNavigationItemIcon label="${1:label}" name="${2:name}" iconName="${3:iconName}"/>
Create Lightning Vertical Navigation Overflow Code Unit (lightning:verticalNavigationOverflow)
-
Activation:
ltn.verticalNavigationOverflow
<lightning:verticalNavigationOverflow>
${0:<!-- Put your Navigation Sections and Items here -->}
</lightning:verticalNavigationOverflow>
Create Lightning Vertical Navigation Section Code Unit (lightning:verticalNavigationSection)
-
Activation:
ltn.verticalNavigationSection
<lightning:verticalNavigationSection label="${1:label}">
${0:<!-- Put your Navigation Items here -->}
</lightning:verticalNavigationSection>
Create Lightning Workspace API Code Unit (lightning:workspaceAPI)
-
Activation:
ltn.workspaceAPI
<lightning:workspaceAPI aura:id="${1:auraId}">
Create Community Back Button Code Unit (lightningcommunity:backButton)
-
Activation:
ltnCommunity.backButton
<lightningcommunity:backButton iconName="${1:iconName}" class="${1:cssClass}" onnavigationcomplete="{!c.${3:jsAction}}"/>
Create Lightning Snapin Minimized API Code Unit (lightningsnapin:minimizedAPI)
-
Activation:
ltnSnapin.minimizedAPI
<lightningsnapin:minimizedAPI aura:id="${1:auraId}"/>
Create Lightning Snapin Prechat API Code Unit (lightningsnapin:prechatAPI)
-
Activation:
ltnSnapin.prechatAPI
<lightningsnapin:prechatAPI aura:id="${1:auraId}"/>
Create Lightning Snapin Settings API Code Unit (lightningsnapin:settingsAPI)
-
Activation:
ltnSnapin.settingsAPI
<lightningsnapin:settingsAPI aura:id="${1:auraId}"/>
Create UI Action Menu Item Code Unit (ui:actionMenuItem)
-
Activation:
ui.actionMenuItem
<ui:actionMenuItem aura:id="${1:auraId}" label="${2:label}" click="{!c.${3:jsAction}}"/>
Create UI Button Code Unit (ui:button)
-
Activation:
ui.button
<ui:button aura:id="${1:auraId}" buttonTitle="${2:buttonTitle}" label="${3:label}" class="button" press="{!c.${4:jsAction}}"/>
Create UI Checkbox Menu Item Code Unit (ui:checkboxMenuItem)
-
Activation:
ui.checkboxMenuItem
<ui:checkboxMenuItem aura:id="${1:auraId}" label="${2:label}"/>
Create UI Input Checkbox Code Unit (ui:inputCheckbox)
-
Activation:
ui.inputCheckbox
<ui:inputCheckbox aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}"/>
Create UI Input Currency Code Unit (ui:inputCurrency)
-
Activation:
ui.inputCurrency
<ui:inputCurrency aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" change="{!c.${4:jsAction}}" updateOn="${5:keyup}"/>
Create UI Input Date Code Unit (ui:inputDate)
-
Activation:
ui.inputDate
<ui:inputDate aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" displayDatePicker="${4:true}"/>
Create UI Input Date Time Code Unit (ui:inputDateTime)
-
Activation:
ui.inputDateTime
<ui:inputDateTime aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" displayDatePicker="${4:true}"/>
Create UI Input Email Code Unit (ui:inputEmail)
-
Activation:
ui.inputEmail
<ui:inputEmail aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>
Create UI Input Number Code Unit (ui:inputNumber)
-
Activation:
ui.inputNumber
<ui:inputNumber aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" updateOn="${4:keyup}"/>
Create UI Input Phone Code Unit (ui:inputPhone)
-
Activation:
ui.inputPhone
<ui:inputPhone aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>
Create UI Input Radio Code Unit (ui:inputRadio)
-
Activation:
ui.inputRadio
<ui:inputRadio aura:id="${1:auraId}" name="${2:name}" label="${3:label}" change="{!c.${4:jsAction}}" value="${5:false}"/>
Create UI Input Secret Code Unit (ui:inputSecret)
-
Activation:
ui.inputSecret
<ui:inputSecret aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>
Create UI Input Select Single Selection Code Unit (ui:inputSelect)
-
Activation:
ui.inputSelect
<ui:inputSelect class="single" aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}">
<aura:iteration items="{!${4:items}}" var="${5:item}">
<ui:inputSelectOption text="${6:text}"/>
</aura:iteration>
</ui:inputSelect>
Create UI Input Select Multiple Selection Code Unit (ui:inputSelect)
-
Activation:
ui.inputSelectMultiple
<ui:inputSelect multiple="true" class="multiple" aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}">
<aura:iteration items="{!${4:items}}" var="${5:item}">
<ui:inputSelectOption text="${6:text}"/>
</aura:iteration>
</ui:inputSelect>
Create UI Input Select Dynamic Code Unit (ui:inputSelect)
-
Activation:
ui.inputSelectDynamic
<ui:inputSelect class="dynamic" aura:id="${1:auraId}" change="{!c.${2:jsAction}}"/>
Create UI Input Select Option Code Unit (ui:inputSelectOption)
-
Activation:
ui.inputSelectOption
<ui:inputSelectOption text="${1:text}"/>
Create UI Input Text Code Unit (ui:inputText)
-
Activation:
ui.inputText
<ui:inputText aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" updateOn="${4:keyup}"/>
Create UI Input Text Area Code Unit (ui:inputTextArea)
-
Activation:
ui.inputTextArea
<ui:inputTextArea aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" rows="${4:nRows}"/>
Create UI Input URL Code Unit (ui:inputURL)
-
Activation:
ui.inputURL
<ui:inputURL aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>
Create UI Menu Code Unit (ui:menu)
-
Activation:
ui.menu
<ui:menu>
${0: <!-- Put your menu items here -->}
</ui:menu>
Create UI Menu Item Separator Code Unit (ui:menuItemSeparator)
-
Activation:
ui.menuItemSeparator
<ui:menuItemSeparator/>
Create UI Menu List Code Unit (ui:menuList)
-
Activation:
ui.menuList
<ui:menuList aura:id="${1:auraId}" class="actionMenu" >
${0: <!-- Put your menu items here -->}
</ui:menuList>
Create UI Menu List Code Unit (ui:menuTriggerLink)
-
Activation:
ui.menuTriggerLink
<ui:menuTriggerLink aura:id="${1:auraId}" label="${2:label}"/>
Create UI Confirmation Message Code Unit (ui:message)
-
Activation:
ui.messageConfirm
<ui:message title="${1:title}" severity="confirm" closable="${2:true}">
${0:<!-- Put your message here -->}
</ui:message>
Create UI Information Message Code Unit (ui:message)
-
Activation:
ui.messageInfo
<ui:message title="${1:title}" severity="info" closable="${2:true}">
${0:<!-- Put your message here -->}
</ui:message>
Create UI Warning Message Code Unit (ui:message)
-
Activation:
ui.messageWarning
<ui:message title="${1:title}" severity="warning" closable="${2:true}">
${0:<!-- Put your message here -->}
</ui:message>
Create UI Error Message Code Unit (ui:message)
-
Activation:
ui.messageError
<ui:message title="${1:title}" severity="error" closable="${2:true}">
${0:<!-- Put your message here -->}
</ui:message>
Create UI Output Checkbox Code Unit (ui:outputCheckbox)
-
Activation:
ui.outputCheckbox
<ui:outputCheckbox aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Currency Code Unit (ui:outputCurrency)
-
Activation:
ui.outputCurrency
<ui:outputCurrency aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Date Code Unit (ui:outputDate)
-
Activation:
ui.outputDate
<ui:outputDate aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Date Time Code Unit (ui:outputDateTime)
-
Activation:
ui.outputDateTime
<ui:outputDateTime aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Email Code Unit (ui:outputEmail)
-
Activation:
ui.outputEmail
<ui:outputEmail aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Number Code Unit (ui:outputNumber)
-
Activation:
ui.outputNumber
<ui:outputNumber aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Phone Code Unit (ui:outputPhone)
-
Activation:
ui.outputPhone
<ui:outputPhone aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Rich Text Code Unit (ui:outputRichText)
-
Activation:
ui.outputRichText
<ui:outputRichText aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Text Code Unit (ui:outputText)
-
Activation:
ui.outputText
<ui:outputText aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output Text Area Code Unit (ui:outputTextArea)
-
Activation:
ui.outputTextArea
<ui:outputTextArea aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Output URL Code Unit (ui:outputURL)
-
Activation:
ui.outputURL
<ui:outputURL aura:id="${1:auraId}" value="{!${2:value}}"/>
Create UI Radio Menu Item Code Unit (ui:radioMenuItem)
-
Activation:
ui.radioMenuItem
<ui:radioMenuItem label="${1:label}"/>
Create UI Scroller Wrapper Code Unit (ui:scrollerWrapper)
-
Activation:
ui.scrollerWrapper
<ui:scrollerWrapper>
${0:<-- Put your content here -->}
</ui:scrollerWrapper>
Create a standard controller function Code Unit
-
Activation:
js.controllerFunction
${1:funcName} : function(${2:component}, ${3:event}, ${4:helper}){
$0
},
Create a standard Aura function Code Unit
-
Activation:
js.function
${1:funcName} : function(${2:params}){
$0
},
Add code for print a JSON Object pretty in console
-
Activation:
js.JSONPretty
JSON.stringify(${1:json}, null, ${2:indenLevel})
Add code for print a JSON Object pretty in console
-
Activation:
js.JSONPrettyConsole -
Alternative Activation:
js.PrintJSONPretty
console.log(JSON.stringify(${1:json}, null, ${2:indenLevel}));
Create a base Modal Dialog Code Unit with Salesforce Lightning Design System (SLDS)
-
Activation:
slds.modal
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">${4:Cancel}</button>
<button class="slds-button slds-button_brand">${5:Save}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)
-
Activation:
slds.modalLtn
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<lightning:icon iconName="utility:close" size="large"/>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<lightning:button label="${4:Cancel}" title="${4:Cancel}" onclick="{!c.${5:jsAction}}" />
<lightning:button variant="brand" label="${6:Save}" title="${6:Save}" onclick="{!c.${7:jsAction}}" />
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog with Tagline Code Unit with Salesforce Lightning Design System (SLDS)
-
Activation:
slds.modalTagline
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
<p>${4:Tagline Text}</p>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">${5:Cancel}</button>
<button class="slds-button slds-button_brand">${6:Save}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog with Tagline Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)
-
Activation:
slds.modalTaglineLtn
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<lightning:icon iconName="utility:close" size="large"/>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
<p>${4:Tagline Text}</p>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<lightning:button label="${5:Cancel}" title="${5:Cancel}" onclick="{!c.${6:jsAction}}" />
<lightning:button variant="brand" label="${7:Save}" title="${7:Save}" onclick="{!c.${8:jsAction}}" />
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Headless Code Unit with Salesforce Lightning Design System (SLDS)
-
Activation:
slds.modalHeadless
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">${3:Cancel}</button>
<button class="slds-button slds-button_brand">${4:Save}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Headless Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)
-
Activation:
slds.modalHeadlessLtn
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<lightning:icon iconName="utility:close" size="large"/>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer">
<lightning:button label="${3:Cancel}" title="${3:Cancel}" onclick="{!c.${4:jsAction}}" />
<lightning:button variant="brand" label="${5:Save}" title="${5:Save}" onclick="{!c.${6:jsAction}}" />
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Footless Code Unit with Salesforce Lightning Design System (SLDS)
-
Activation:
slds.modalFootless
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Code Footless Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)
-
Activation:
slds.modalFootlessLtn
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<lightning:icon iconName="utility:close" size="large"/>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Directional Code Unit with Salesforce Lightning Design System (SLDS)
-
Activation:
slds.modalDirectional
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer slds-modal__footer_directional">
<button class="slds-button slds-button_neutral">${4:Skeep this Step}</button>
<button class="slds-button slds-button_brand">${4:Save & Next}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
Create a base Modal Dialog Code Directional Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)
-
Activation:
slds.modalDirectionalLtn
<div style="height:640px">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
<lightning:icon iconName="utility:close" size="large"/>
<span class="slds-assistive-text">"${2:Close}"</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
${0:<!-- Put yout modal content here -->}
</div>
<footer class="slds-modal__footer slds-modal__footer_directional">
<lightning:button label="${4:Skeep this Step}" title="${4:Skeep this Step}" onclick="{!c.${5:jsAction}}" />
<lightning:button variant="brand" label="${6:Save & Next}" title="${6:Save & Next}" onclick="{!c.${7:jsAction}}" />
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>