2

I am creating a resuable message component for use in the Lightning App Builder, and previously was using ui:message. However, as that uses Classic styling and this will be used in Lightning, I used the following component and design to create a version using SLDS-standard styles (straight from the SLDS site):

globalMessageBlock Component

<aura:component implements="flexipage:availableForAllPageTypes">

    <aura:attribute name="message" type="String" />
    <aura:attribute name="messageType" type="String" />

    <div class="{!'slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_' + v.messageType}" role="alert">
        <span class="slds-assistive-text">{!v.messageType}</span>
        <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
        <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning" />
        </svg>
        </span>

        <h2>{!v.message}</h2>

    </div>
</aura:component>

globalMessageBlock Design

<design:component label="Message Block">
    <design:attribute name="message" label="Message" description="Contents of the message to appear in this component" />
    <design:attribute name="messageType" label="Message Type" description="Controls the appearance of the message on the record page" datasource="warning,error,offline" />
</design:component>

When trying to save the component, I receive the error message

"Failed to save globalMessageBlock.cmp: null: Source"

which isn't entirely helpful.

It's also worth noting that I get the same error if I simply copy and paste the example code for this alert from the SLDS website (at this page).

Is implementing a component using SLDS in this manner unsupported? Or is there some issue in the code when creating a component that I can fix?

2

SVG elements are not directly supported at this time. Use lightning:icon instead.

Change this code:

    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning" />
    </svg>

To this code:

<lightning:icon iconName="utility:warning" size="x-small" />
| improve this answer | |
  • bamm.. we posted with margin of miliseconds :) – Himanshu Nov 17 '17 at 4:08
  • This worked like a charm! Using lightning:icon also allowed me to use standard icons and give users more options. Thanks! – Luke Miller Nov 17 '17 at 5:33
0

The Design System uses SVG icons. You can use them in your Lightning components by using one of the new Base Lightning Components called lightning:icon.

it means you need to replace your svg icon with lightning:icon

<aura:attribute name="message" type="String" />
<aura:attribute name="messageType" type="String" />

<div class="{!'slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_' + v.messageType}" role="alert">
    <span class="slds-assistive-text">{!v.messageType}</span>
    <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
    <lightning:icon iconName="utility:warning" size="large" alternativeText="Indicates approval"/>
    </span>

    <h2>{!v.message}</h2>

</div>

Alternative solution:

Craete one svg component

svg.cmp

<aura:component >
  <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
  <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
  <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

svgRenderer.js

({
  render: function(component, helper) {
    //grab attributes from the component markup
    var classname = component.get("v.class");
    var xlinkhref = component.get("v.xlinkHref");
    var ariaHidden = component.get("v.ariaHidden");

    //return an svg element w/ the attributes
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('class', classname);
    svg.setAttribute('aria-hidden', ariaHidden);
    svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
    return svg;
  }
})

and use as c:svg in your component.

<c:svg ariahidden="true" xlinkHref="/resource/slds/assets/icons/utility-sprite/svg/symbols.svg#warning"/>
| improve this answer | |
  • This was a great option as well, though using lightning:icon allowed me to use the built-in lightning icon library. Thank you for the input, this may come in handy on another project I'm working on. – Luke Miller Nov 17 '17 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.