function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ken Koellner @ EngagewareKen Koellner @ Engageware 

Select one of several items with icon when all are always visible in aura component

I'd like to put up a list of items such that all are always visible, not like a combo box / dropdown.  One is preselected and the user may leave it or select a different one.  I can do it with a single tag with lightning:radioGroup.  But radioGroup only always the label to be text.  I'd like to have a litlte block with an icon and a name.  I'd like something like the example "Tiles in a List" on lightning-tile where one item may be selected.

Any idea of a tag, combination of tags, are styles to do that, preferable a snippet of code as an example.
Ken Koellner @ EngagewareKen Koellner @ Engageware
The issue I'm facing on this one is every Lightning tag a look at that I think might be appropos takes label="sometext" rather than contents.

I can code-- 
<lightning:verticalNavigationItem label="My Label" name="Id1" />

but what I want is -- 
<lightning:verticalNavigationItem name="Id1" >
  Some tags to get an icon.
  Some tags to get a name and description.
</lightning:verticalNavigationItem>

I'm using lightning:verticalNavigationItem as an example but it's the same for lightning:radioGroup.  I'm using radioGroup name and it works just fine with virtually no code to write but I'd like to get something fancier than a simple text label for each option. 
Alain CabonAlain Cabon
I tried to combine the class="slds-nav-vertical" and <lightning:card> that seems to work.

It is not an pre-existing component of Salesforce (we create our own one).

onclick still works with a minimal access to the properties of the event (target id).

The standard slds tags mixed "display:block" and "display:flex" and that is problem for slds-nav-vertical__action.

You can override it (slds-nav-vertical__action2) and change the display parameter only.
  
({
    handleClick : function(cmp, event, helper) {
        var target = event.target;
        var currentTarget = event.currentTarget;
        var targetId = target.id;
        console.log('handleClick = ' + target.id + ' => ' + currentTarget.id);
        
        var selectedMenu = cmp.get('v.selectedMenu');
        if (selectedMenu && selectedMenu !=='') {
            var liElt1 = document.getElementById(selectedMenu);
            if (liElt1 &&  liElt1.classList) liElt1.classList.remove("slds-is-active");
        }     
        selectedMenu = targetId.replace('me-','li-');
        var liElt2 = document.getElementById(selectedMenu);
        if (liElt2 && liElt2.classList) { 
            liElt2.classList.add("slds-is-active");
            cmp.set('v.selectedMenu',selectedMenu);
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({"title": "Menu selected","type":"success","message": cmp.get('v.selectedMenu').replace('li-','')});
            resultsToast.fire();
        }
    },  
})
  
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="menuItems" type="List" default="['Recent', 'Created by Me', 'Private Reports','Public Reports','All Reports']" />
    <aura:attribute name="selectedMenu" type="String" default=""/>
    <div class="demo-only" style="width:320px;background-color:white">
        <nav class="slds-nav-vertical" aria-label="Sub page">
            <div class="slds-nav-vertical__section">
                <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>
                <ul aria-describedby="entity-header">
                    <aura:iteration var="menu" items="{!v.menuItems}">
                        <li  id="{! 'li-' + menu}" class="slds-nav-vertical__item slds-nav-vertical_shade" >
                            <span id="{! 'me-' + menu}" onclick="{!c.handleClick}" class="slds-nav-vertical__action2" aria-current="true">
                                
                                <lightning:card   title="{!menu}" 
                                                iconName="standard:contact"  >    
                                    <aura:set attribute="footer">
                                        <lightning:badge label="footer"/>
                                    </aura:set>
                                    <p class="slds-p-horizontal_small">
                                        Message:  {!menu}
                                    </p>
                                </lightning:card>
                                
                            </span>             
                        </li>                     
                    </aura:iteration>                   
                </ul>
            </div>
        </nav>
    </div>
</aura:component>
  

.THIS .slds-nav-vertical__action2 {
    position: relative;
    display: block;
    align-items: center;
    width: 100%;
    padding: .5rem 1.5rem .5rem 2rem;
    color: rgb(22, 50, 92);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    box-shadow: inset 0 0 0 rgb(21, 137, 238);
    cursor: pointer;
}
.THIS .slds-nav-vertical__item.slds-is-active {
    font-weight: bold;
    box-shadow: inset 0.25rem 0 0 rgb(21, 137, 238);
}
.THIS .slds-nav-vertical__item:hover {
    font-weight: bold;
    box-shadow: inset 0.15rem 0 0 rgb(21, 137, 238);
}

Active and hover just change the width of the border blue bar on the left and the font weight for the visual effects.
 
Alain CabonAlain Cabon
The result is like that (a vertical menu with imbedded cards).

User-added image


 
Ken Koellner @ EngagewareKen Koellner @ Engageware
I want something narrow vertically so I can have a list of items from which a user can select one.  Maybe something like below.  

User-added image
  
<lightning:card  class="customCardClass " >
                <aura:set attribute="actions">
                        <lightning:button label="Select"/>
                    </aura:set>
                    <aura:set attribute="title">
                            <lightning:icon iconName="standard:user" size="small"/>
                            Bobby Buyer
                    </aura:set>
        </lightning:card>
        <lightning:card class="customCardClass "  >
                <aura:set attribute="actions">
                        <lightning:button label="Select"/>
                    </aura:set>
                    <aura:set attribute="title">
                            <lightning:icon iconName="standard:user" size="small"/>
                            Betty Broker
                    </aura:set>
        </lightning:card>
  
.THIS.customCardClass >header.slds-card__header.slds-grid{
    padding-top:1px;
    margin-bottom:1px;
    margin-top:1px;

}

.THIS.customCardClass {

    margin-top:2px !important;;

}





 
Ken Koellner @ EngagewareKen Koellner @ Engageware
Here's the same example with check boxes...
User-added image
  
<lightning:card  class="customCardClass " >
                <aura:set attribute="actions">
                        <lightning:input type="checkbox" label=""/>
                    </aura:set>
                    <aura:set attribute="title">
                            <lightning:icon iconName="standard:user" size="small"/>
                            Bobby Buyer
                    </aura:set>
        </lightning:card>
        <lightning:card class="customCardClass "  >
                <aura:set attribute="actions">
                        <lightning:input type="checkbox" label=""/>
                    </aura:set>
                    <aura:set attribute="title">
                            <lightning:icon iconName="standard:user" size="small"/>
                            Betty Broker
                    </aura:set>
        </lightning:card>
Same CSS as last example.
Alain CabonAlain Cabon
So you have your own alternative solution that works with just checkboxes and it is already sufficient?

The questions with SLDS are linked with the CSS (nice look) but you can achieve the same result with a list and checkboxes indeed (that was not the question).

There are many alternatives if you want to select many items and your list above is already sufficient for you. Good.