+ Start a Discussion
stibbettstibbett 

Hide Lightning Component based on Language

Hi - I'm relatively new to Lightning so I'm not sure where to look for this.

I have a community page that I've built with Builder, and it has a component on it, and a language switcher.  Guests can view the page, and switch between English and French.

There's one particular component that I need to hide when the user's language is French.

How can I do that?

I looked at Audiences but I don't see how I can create an audience based on a guest user's selected language.

There's <aura:renderif> but I don't see how I can apply that to the page I built with Builder.

The component I'm trying to hide is a Contact Support form, so it's fairly complicated inside otherwise I could do in HTML/JavaScript.

Is there an easy way to do this?

Thanks!
 -- Steve
Best Answer chosen by stibbett
Alain CabonAlain Cabon
@Steve Tibbet

You can use an application event
 
<!--c:appEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
</aura:event>

The main component handles the app event in reception and changes he value of the <aura:if>
 
<aura:component access="global" implements="flexipage:availableForAllPageTypes" controller="MassEmailController">
   
    <aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}"/> 
    
    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
    
    <aura:if isTrue="{!v.showCmp}">
    .....
   </aura:if>

</aura:component>
 
handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");
        if (message == 'French') {
            cmp.set('v.showCmp',false);
        } else {
            cmp.set('v.showCmp',true);
        } 
    },

The other component (anywhere on the page) fires the app event with the language in the message (parameter of the app event) when the value changes (here a radio group)
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
	<aura:registerEvent name="appEvent" type="c:appEvent"/>
    <aura:attribute name="options" type="List" default="[
    {'label': 'French', 'value': 'French'},
    {'label': 'English', 'value': 'English'}
    ]"/>
    <aura:attribute name="value" type="String" default="English"/>

    <lightning:radioGroup name="radioGroup"
                          label="Radio Group"
                          options="{! v.options }"
                          value="{! v.value }"
                          onchange="{! c.handleChange }"
                          type="radio"/>
</aura:component>
 
({
    handleChange: function (cmp, event) {
        var changeValue = event.getParam("value");
        alert(changeValue);
        var appEvent = $A.get("e.c:appEvent");
        appEvent.setParams({ "message" : changeValue });
	    appEvent.fire();    
    }
})


User-added image


User-added image


 

All Answers

Alain CabonAlain Cabon
@Steve Tibbet

You can use an application event
 
<!--c:appEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
</aura:event>

The main component handles the app event in reception and changes he value of the <aura:if>
 
<aura:component access="global" implements="flexipage:availableForAllPageTypes" controller="MassEmailController">
   
    <aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}"/> 
    
    <aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
    
    <aura:if isTrue="{!v.showCmp}">
    .....
   </aura:if>

</aura:component>
 
handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");
        if (message == 'French') {
            cmp.set('v.showCmp',false);
        } else {
            cmp.set('v.showCmp',true);
        } 
    },

The other component (anywhere on the page) fires the app event with the language in the message (parameter of the app event) when the value changes (here a radio group)
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
	<aura:registerEvent name="appEvent" type="c:appEvent"/>
    <aura:attribute name="options" type="List" default="[
    {'label': 'French', 'value': 'French'},
    {'label': 'English', 'value': 'English'}
    ]"/>
    <aura:attribute name="value" type="String" default="English"/>

    <lightning:radioGroup name="radioGroup"
                          label="Radio Group"
                          options="{! v.options }"
                          value="{! v.value }"
                          onchange="{! c.handleChange }"
                          type="radio"/>
</aura:component>
 
({
    handleChange: function (cmp, event) {
        var changeValue = event.getParam("value");
        alert(changeValue);
        var appEvent = $A.get("e.c:appEvent");
        appEvent.setParams({ "message" : changeValue });
	    appEvent.fire();    
    }
})


User-added image


User-added image


 
This was selected as the best answer
stibbettstibbett
Thanks Alain - I'm still working on the implementation but I think the info is all here and I appreciate your time putting it together for me.  Thanks!