i have a problem to figure out, how to toggle buttons in aura/lightning component. I have two buttons with functions showMore and showLess.  The thing is, i want to only see button show more, and when i click on it, i want to show more button disappear and show less appear. And same with when i click on show less, switch show more on and less off     &lt;span class="show-more-button"&gt;         &lt;lightning:buttonIcon iconName="utility:macros"  alternativeText="Show more columns" onclick="{!c.showMore}" aura:id="show_more"/&gt;     &lt;/span&gt;     &lt;span class="show-less-button"&gt;         &lt;lightning:buttonIcon iconName="utility:macros"  alternativeText="Show less columns" onclick="{!c.showLess}" aura:id="show_less"/&gt;     &lt;/span&gt;
122522
How to show or hide particular block in the onclick events in the lightning component
117909
Once selected, radio buttons cannot be deselected. Is there a way to reset the lightning-radio-group component or deselect the selected option?
39268
Do you know how can I set the width of a modal window opened by a lightning component action? In the edit options I can set only the height but is not enough because the content of my table is not completely shown. Here is the code:  &lt;aura:component access="GLOBAL" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" controller="OrganizeEnvelopeController" &gt;     &lt;aura:handler name="init" value="{!this}" action="{!c.doInit}" /&gt;     &lt;aura:attribute name="plico" type="Envelope__c" /&gt;     &lt;aura:attribute name="fixedDocs" type="Bit2Sign__Fixed_Document__mdt[]" /&gt;     &lt;div class="c-container"&gt;         &lt;lightning:layout horizontalAlign="space"&gt;             &lt;lightning:layoutItem flexibility="auto" padding="around-small" size="6"&gt;                 &lt;aura:text value="Tipologia Plico: "/&gt;                 &lt;aura:text value="{!v.plico.Bit2Sign__Tipologia_Invio__c}"/&gt;             &lt;/lightning:layoutItem&gt;             &lt;lightning:layoutItem flexibility="auto" padding="around-small" size="6"&gt;                 &lt;aura:text value="Descrizione Plico: "/&gt;                 &lt;aura:text value="{!v.plico.Name}"/&gt;             &lt;/lightning:layoutItem&gt;         &lt;/lightning:layout&gt;     &lt;/div&gt;     &lt;aura:text value="Elenco Documenti"/&gt;     &lt;table class="slds-table slds-table--bordered slds-table--cell-buffer"&gt;         &lt;thead&gt;             &lt;tr class="slds-text-title--caps"&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="Nome documento"&gt;Nome documento&lt;/div&gt;               &lt;/th&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="Tipologia Documento"&gt;Tipologia Documento&lt;/div&gt;               &lt;/th&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="Stato"&gt;Stato&lt;/div&gt;               &lt;/th&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="Firmatari"&gt;Firmatari&lt;/div&gt;               &lt;/th&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="File"&gt;File&lt;/div&gt;               &lt;/th&gt;               &lt;th scope="col"&gt;                 &lt;div class="slds-truncate" title="Action"&gt;Action&lt;/div&gt;               &lt;/th&gt;             &lt;/tr&gt;         &lt;/thead&gt;         &lt;tbody&gt;             &lt;aura:iteration items="{!v.fixedDocs}" var="docs"&gt;                 &lt;tr&gt;                     &lt;td&gt;{!docs.Label}&lt;/td&gt;                     &lt;td&gt;{!docs.__Document_Type__c}&lt;/td&gt;                     &lt;td&gt;{!docs.__State__c}&lt;/td&gt;                     &lt;td&gt;{!docs.__Firmatari__c}&lt;/td&gt;                     &lt;td&gt;&lt;lightning:input aura:id="file" type="file" label=" " name="file" multiple="true" accept=".pdf, .doc, .docx" onchange="{!c.save}"/&gt;&lt;/td&gt;                     &lt;td&gt;&lt;lightning:button label="" iconName="utility:delete" iconPosition="left"/&gt;&lt;/td&gt;                 &lt;/tr&gt;             &lt;/aura:iteration&gt;             &lt;c:OrganizeEnvelopeRow /&gt;             {!v.body}         &lt;/tbody&gt;     &lt;/table&gt; &lt;/aura:component&gt;
80476
I have two function which needs to be called from one button. Currently I am doing this by creating two button one "Confirm" and another "Save". but I don't want two button I want only one button "Save", on click of Save first the method called by "Confirm" button should be called and then the method called by "Save" button.  Below is my code:  &lt;apex:commandButton value="Confirm" action="{!save}"/&gt;    &lt;apex:commandButton value="Save" action="javascript:top.window.opener.closeFunction()" &gt;&lt;/apex:commandbutton&gt;
13940
Canonical Question  I want to do &lt;some really cool thing&gt; with a lightning:datatable, but I can't seem to figure out how to do it. I checked the , but I did not see a way to implement &lt;this really cool feature I need&gt;.  Perhaps I want to provide tooltips, or a pick list, or alter the behavior of the menus, or display images, or show a custom component I created, or define a new row-level click behavior, or alter the keyboard event handlers, etc.  Can I somehow do this?
112886
I am building a menu component.  One menu-item is a sub-menu with list of opportunities, this list is created with aura:iteration over a list of opportunities.  When selecting a menu or a sub-menu, I need to make it look selected (change css attribute). For this to happen, I need to find this menu item in my controller.  If I add id attribute to my item markup and use the event attribute on my controller (event.currentTarget.id), I can catch the item itself and change it's style, this works:  MARKUP       &lt;aura:iteration items="{!v.opportunities}" var="opp"&gt;     &lt;li class="slds-dropdown__item" role="presentation"&gt;         &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}"&gt;             &lt;span class="slds-truncate" title="{!opp.Name}"&gt;{!opp.Name}&lt;/span&gt;         &lt;/a&gt;     &lt;/li&gt; &lt;/aura:iteration&gt;   CONTROLLER    openItemFromMenu: function(component, event, helper) {     // get the id     var oppId = event.currentTarget.id;     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   PROBLEM  when I try to change the menu selected not from the click of the item (event that is triggered from another page) - I have added an event handler to change the menu item, and I send the opportunity id through that event. Then (after adding aura:id to my item, I am trying to find this menu item of this oppId with component.find in my controller - this does not work:  CHANGED MARKUP  add: &lt;aura:handler name="eventSelectMenuItem" event="c:myEvent" action="{!c.openItemFromMenu}" /&gt; change: &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}" aura:id="{!opp.Id}"&gt;   CHANGED CONTROLLER  openItemFromMenu: function(component, event, helper) {     // get the id from the event     var oppId = event.getParam("recordId");     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   QUESTION  Does component.find for aura:id within an aura:iteration suppose to work?  If not - is there a workaround?  If it does suppose to work - what am I doing wrong?
89933
Hi, I want to create a table in my lightning component. I created 2 lightning:input fields and want to change the vertical alignment to "middle" but it does not work.   I tried to do the following:  &lt;td  class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   and this:   &lt;td&gt;&lt;span class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/span&gt;&lt;/td&gt;   and this:  &lt;td Style="text-align: center;vertical-align:top;" valign="middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   I am using slds:      &lt;table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered"&gt;      &lt;thead&gt;...&lt;/thead&gt;      &lt;tbody&gt;       &lt;tr&gt; [td in the middle of the cell] &lt;/tr&gt;      &lt;/tbody&gt;     &lt;/table&gt;   I hope someone can help me. Thanks!
107908
I have began developing a button to automatically close the current case but I can't seem to get it working. I have tried a few different approaches but would someone be able to point me in the right direction.  As it stands the button does nothing, I feel like im on the right track, looking for someone who has done something similar with regards to updating fields from within a lightning component.   CMP  &lt;aura:component controller="AmexComm_SecureMsgController" implements="forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"&gt; &lt;aura:attribute name="record" type="Case"/&gt; &lt;aura:attribute name="caseStatus" type="String"/&gt; &lt;aura:attribute name="caseId" type="String" default="{!v.recordId}"/&gt;  &lt;aura:handler name="init" value="{!this}" action="{!c.doInit}"/&gt;   &lt;button class="slds-button slds-button--neutral newsbutton" style="float:right"  onclick="{!c.closeCase}"&gt;Close Case&lt;/button&gt;   AmexComm_SecureMsgController   @AuraEnabled     public static Case getCase(Id caseId){         return([Select id, Atrium_Subject__c, Atrium_AmexSubject__c, Status, Atrium_Message_Status__c, Contact.Name, ContactId, CreatedDate, Message_Number__c, LastModifiedDate, Description__c,                 (SELECT id, Name From Attachments)                                 From Case Where id=:caseId]);     }     @AuraEnabled     public static Case closeCase(Case caseA){        update caseA;        return caseA;     }   Controller  { doInit : function(component, event, helper) {     component.set("v.isError", false)     component.set("v.showEditView", false);     component.set("v.errorMsg", "");      var action = component.get("c.getCase");     action.setParams({         caseId : component.get("v.caseId")     });      action.setCallback(this, function(a) {         if (a.getState() === "SUCCESS") {             component.set("v.record", a.getReturnValue());             helper.getStatusPickListValue(component);         }     });      $A.enqueueAction(action); },  closeCase : function (component, event, helper) {     var action = component.get("c.closeCase");     var Status = component.get("v.record.Status") //get value of field     //console.log("Status: " Status);     action.setParams({Status : Closed});      $A.enqueueAction(action); },   Helper  getStatusPickListValue : function(component) {          var action = component.get("c.getCaseStausPickList");         action.setCallback(this, function(response) {             var state = response.getState();             var hasImg = false;             if (component.isValid() &amp;&amp; state === "SUCCESS") {                  var statusPickList = response.getReturnValue();                 component.set("v.lstCaseStatus", statusPickList);                  console.log('status picklist ::', component.get("v.lstCaseStatus"));             }         });         $A.enqueueAction(action);      },
49293
I have a lightning iteration component that shows several information on accounts in a row. One of the columns allows the user to choose a lookup( I use a custom lookup component) value to edit the account. I have another row that has a checkbox. What I am trying to accomplish is if the user clicks the checkbox, the column with the lookup value gets greyed out and is not allowed for editing. I tried to do this with a boolean attribute that gets turned to false if the checkbox is checked and then use an aura if to display the custom lookup component in the column but this ends up disabling the entire column. I need the row to have that column be disabled in THAT specific row is the checkbox in that row is checked. Below is code.  &lt;aura:iteration var="account" items="{!v.Accounts}" indexVar="idx"&gt;     &lt;tr class="slds-hint-parent"&gt;         &lt;th role="gridcell"&gt;             &lt;div class="slds-truncate" title="Acc"&gt;&lt;a href="{!'/'+ account.Id }" target="_blank" tabindex="-1"&gt;{!account.Name}&lt;/a&gt;&lt;/div&gt;         &lt;/th&gt;         &lt;td role="gridcell"&gt;             &lt;lightning:layoutItem size="4"&gt;                 &lt;aura:if isTrue = "{!v.show}"&gt;                     &lt;c:customLookupComp objectAPIName="Master_Customer__c"                         iconName="standard:account"                         selectedRecord="{!v.selectedLookUpRecord}"                         label="Search"                         fieldAPIName="Id"                         resultField1="Master_Customer__c"                         resultField2=""                         showlabel="false"                         /&gt;                     &lt;force:inputField  value="{!v.selectedLookUpRecords}"/&gt;                 &lt;/aura:if&gt;             &lt;/lightning:layoutItem&gt;         &lt;/td&gt;         &lt;td role="gridcell"&gt;             &lt;div class="slds-truncate" title="Parent acc"&gt;&lt;a href="{!'/'+ account.parentid }" target="_blank" tabindex="-1"&gt;{!account.Parent.Name}&lt;/a&gt;&lt;/div&gt;         &lt;/td&gt;         &lt;td role="gridcell"&gt;             &lt;label class="slds-checkbox--button__label" data-record="{!idx}"  onclick="{!c.masterCustomerCheckbox}"&gt;                 &lt;ui:inputCheckbox aura:id="button1" /&gt;             &lt;/label&gt;         &lt;/td&gt;     &lt;/tr&gt; &lt;/aura:iteration&gt;   CONTROLLER  onLookupSelected : function(component, event) {     console.log('in lookupselected');     var selectedAccountGetFromEvent = event.getParam("selectedRecord");     console.log('in lookupselected2');     var recordsList = component.get("v.selectedLookUpRecords");     recordsList.push(selectedAccountGetFromEvent);     //component.set("v.selectedLookUpRecords" , selectedAccountGetFromEvent);      console.log('in lookupselected3');     var record = component.get("v.selectedLookUpRecords");   }, masterCustomerCheckbox : function(component, event, helper) {     console.log('in myfunc');     //var show = component.get("v.show");     //console.log('before show' + show);     //component.set("v.show", false);     //console.log('show ' + show);     var selectedItem = event.currentTarget; // Get the target object     var index = selectedItem.dataset.record; // Get its value i.e. the index This is because in the iterration i used index on it     var selectedacc = component.get("v.Accounts")[index]; // Use it retrieve the stored record     console.log('Acc Id ' + selectedacc.Id);      var masterCustomersToCreate = component.get("v.masterCustomerToCreate");     masterCustomersToCreate.push(selectedacc);      console.log('this is the master customer to create' + masterCustomersToCreate);      var action = component.get('c.createMasterCustomers');      action.setParams({         'accList': masterCustomersToCreate     })      action.setCallback(this, function(response) {         //store state of response         var state = response.getState();         if (state === "SUCCESS") {             //alert('Record Created');         }     });     $A.enqueueAction(action);    },
26194
I have a form that needs to let the user select 3 out of 5 products, something similar to Order > Add Product (Modal). I was wondering if there was a way to bring that piece into my component (markup) and add some sort of filter that only shows the products I want to show.  What I found so far:  &lt;lightning:listView objectApiName="Products2" listName="productsView" showActionBar="true" enableInlineEdit="true" showRowLevelActions="true"/&gt;   But Product2 is not supported for that component.  also these from browser inspector:  forceMultiAddUsingLVM forceListViewManager   These are data-aura-class attributes when rendered.  I'm looking for directions here. Thanks in advance.
87822
I am writing a lightning web component that is going to be used in Salesforce Classic, Lightning Experience and an Employee Community. It does not HAVE to be a lightning web component - I could use a traditional Aura Lightning Component if I must.   However, what I am finding is that the visualforce page does not work, even when the lwc component is embedded in a aura component that is then used with Lightning Components for Visualforce. I can see from the documentation  that using a lwc directly from within visualforce is not supported, but I was under the impression that it may work if wrapped in an aura component.   My question then is this:  Has anyone had success having a lwc wrapped in an aura component display successfully within Visualforce? Or is this completely unsupported behaviour?
26816
I have a couple custom lightning pages and apps, both overriding default record views and standalone pages (just straight nav to from the sidebar). It seems that every time we go from 'tab' to 'tab' it just hides the content rather than destroying it. When you navigate back to the tab, it does recreate the components, so you end up with 2 of everything sitting out there.  I noticed this b/c we have a component that registers to an app event. And every time you navigate away from and back to the page, the handler is registered +1. So going back and forth a few times you pretty quickly have 10s of the same handlers firing for each app event.  Anyone seen this? Thoughts?  If you create a Lightning App, add this component, and assign it to lightning menu you can see what I mean. Just go the app click home and then click back:  Comp:  &lt;aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"&gt;     &lt;aura:handler event="c:BoringAppEvent" action="{!c.test}"/&gt;     hi     &lt;ui:button press="{!c.onClick}" &gt;App Event&lt;/ui:button&gt; &lt;/aura:component&gt;   controller:  ({     test : function(component, event, helper) {         console.log('Clicked');     },     onClick : function(cmp, evt){          var notEvt = $A.get('e.c:BoringAppEvent');          notEvt.fire();     } })   Renderer  ({     unrender: function(){         this.superUnrender();         console.log('unrender');         debugger;     } })   BoringAppEvent.evt  &lt;aura:event type="APPLICATION" description="Event template" /&gt;
70627
Im on a lightning community, i have a lightning component and i want to open another component with this code:  navigateToMyComponent : function(component, event, helper) {     console.log('1');     var evt = $A.get("e.force:navigateToComponent");     console.log('2');     evt.setParams({         componentDef : "c:CompetenciaComponent"     });     console.log('3');     evt.fire();     console.log('4'); }   this its the console log:   NOTHINGS HAPPEND AND I DONT KNOW WHY
76419
I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.  To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.  Here's the jQuery I'm using:  $(document).ready(function () {   $(".hiddenOnLoad").hide();    $("#viewByOrg").change(function () {     $(".visibleOnLoad").show();     $(".hiddenOnLoad").hide();   });    $("#viewByProduct").change(function () {     $(".visibleOnLoad").hide();     $(".hiddenOnLoad").show();   }); });   Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.  &lt;tr&gt;   &lt;td&gt;View by:&lt;/td&gt;   &lt;td&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByOrg" value="organisation"       checked="checked" /&gt;Organisation&lt;/p&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByProduct" value="product" /&gt;Product&lt;/p&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="visibleOnLoad"&gt;   &lt;td&gt;Organisation:&lt;/td&gt;   &lt;td&gt;     &lt;select name="organisation" id="organisation" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="hiddenOnLoad"&gt;   &lt;td&gt;Product:&lt;/td&gt;   &lt;td&gt;     &lt;select name="product" id="product" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt;   If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!
116179
I would like to run 2 actions with a custom button. For example in edit mode I would like to run 1. Disolve edges and after that, 2. Disolve vertex.  Is there a way to create this custom button?  Thank you.
62019
Using VS2008, C#, .Net 2 and Winforms how can I make a regular Button look "pressed"? Imagine this button is an on/off switch.  ToolStripButton has the Checked property, but the regular Button does not.
97960
If a lightning-radio-group has two options, and a user selects one, I want to programmatically have the UI changed back to the other one.  Link to a . (code copied below)  import { LightningElement, track } from 'lwc';  export default class RadioGroupRequired extends LightningElement {     @track value = 'option1';      get options() {         return [             { label: 'Option one', value: 'option1' },             { label: 'Option two', value: 'option2' },         ];     }      handleOnChange(evt) {         this.value = 'option1';         // how to make the UI select Option one?     } }   And the html:  &lt;template&gt;     &lt;lightning-radio-group name="radioGroup"                            label="Radio Group"                            options={options}                            value={value}                            required                            type="button"                            onchange={handleOnChange}&gt;&lt;/lightning-radio-group&gt;                             value={value} &lt;/template&gt;     I think that there is no rerendering because the bind variable, {value} doesn't actually change. However, the selected state of the lightning-radio-group does, and I want to be able to change it back. How can that be achieved?   I did not notice any methods or attributes that would seem to do the trick in the .