• Andrew Aldis 15
  • NEWBIE
  • 85 Points
  • Member since 2018

  • Chatter
    Feed
  • 0
    Best Answers
  • 4
    Likes Received
  • 0
    Likes Given
  • 40
    Questions
  • 14
    Replies
I am trying to create a HTML table in a lightning component to show a list of contacts related to a account.  I have the list but am trying to use lightning:formattedName and lightning:formattedphone components to display the name and phone nujmber however when I go to the page it shows functions rather than the correct information.  Please see my code and the image below.  Does anyone know why this is happening and what I can do to correct it?  ui:output fields work like with the email, but not the lightning formatted which  I have used several times before.

<aura:iteration items="{!v.contacts}" var="c">
<tr class="tableRow">
<td class="tableCol col1">
<lightning:formattedName aura:id="c.Id" firstName="{!c.FirstName}" lastName="{!c.LastName}" />
</td>
<td class="tableCol col2">
{!c.Title}
</td>
<td class="tableCol col3">
<ui:outputCheckbox value="{!c.RIA_Primary_Contact__c}" />
</td>
<td class="tableCol col4">
<p>
<lightning:formattedPhone value="{!c.Phone}"></lightning:formattedPhone>
</p>
</td>
<td class="tableCol col5">
<ui:outputEmail value="{!c.Email}" />
</td>
</tr>
</aura:iteration>


User-added image
I created a HTML table in a lighting component, that needs specific styling of the text within the defferent rows.  I also need to add onclick javascript to the row or cells that will call a method.  I am using aura:iteration and need to get a external Id associated with every  row, the external Id field is title comp_fund_code.  Every thing I try only results in a event.getSource() is not a function error message.  Does anyone know how I can accomplish this.  My cod eis below.

<table class="table">
<aura:iteration items="{!v.salesBreakdown}" var="sb">
<tr class="row" onclick="{!c.openModal}" aura:id="{!sb.comp_fund_code}" name="{!sb.comp_fund_code}">
<td class="fund" aura:id="{!sb.comp_fund_code}" name="{!sb.comp_fund_code}">
{!sb.fund_name}
</td>
<td class="sales" aura:id="{!sb.comp_fund_code}" name="{!sb.comp_fund_code}">
<lightning:formattedNumber value="{!sb.sales}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
openModal: function (component, event, helper) {
console.log('open modal')
var fundCode = event.getSource().getLocalId();
component.set('v.fundCode',fundCode);
component.set('v.showFundDetails', true);
},
 
We have a custom lightning  component that we plan to use with Mobile.  We were hoping to replace the phone number, email, and address with icons that would still open maintain the ability to call open emails and open the map just like the text version can.  Is there a way to pull that off?
I am creating a lightning component and am having trouble with the order that the Java script runs.  I have some <canvas></canvas> in a lightning tab.  when the tabs are changed it calls some javascript which cannot find the canvas on the first time I select a tab.  After I select the tab and go back to it it works fine.  I am using charts.js as well, but I do not think that is the issue.  How can make sure that the canvas component renders prior to the javascript running?  My code is below.

Lightning CMP:
<lightning:tabset class="tabs" variant="scoped" onselect="{! c.tabSelect }">
<lightning:tab label="RETAIL" id='retail'>
<div class="asOfGraph" >as of {!v.asOfGraph}</div>
<div class="graph" >
<canvas aura:id="barChart" id="barChart" class="barChart" />
</div>
</lightning:tab>
<lightning:tab label="DCIO" id="dcio">
<div class="asOfGraph">as of {!v.asOfGraph}</div>
<div class="graph" id="dcioGraph" >
<canvas aura:id="dcioChart" id="dcioChart" class="dcioChart" />
</div>
</lightning:tab>
<lightning:tab label="RECORDKEEPER" id='recordkeeper'>
<div class="asOfGraph">as of {!v.asOfGraph}</div>
<div class="graph" id="recordKeeperGraph">
<canvas aura:id="recordChart" id="recordChart" class="recordChart"/>
</div>
</lightning:tab>
<lightning:tab label="ASSETS" id='assets'>
<div class="asOfGraph">as of {!v.asOfGraph}</div>
<div class="graph" id="assetsGraph">
<canvas aura:id="assetsChart" id="assetsChart" class="assetsChart"/>
</div>
</lightning:tab>
</lightning:tabset>

JS
tabSelect: function (cmp, evt, help) {
var tab = evt.getParam("id");
console.log('tab is ' + tab);
if (tab == 'assets') {
help.createVerticalGraph(cmp, evt);
//cmp.set("v.assetsSet", true);
} else if (tab == 'dcio') {
help.createBarGraph(cmp, evt);
// cmp.set("v.dcioSet", true);
} else if (tab == 'recordkeeper') {
help.createBarGraph(cmp, evt);
// cmp.set("v.recordkeeperSet", true);
}
},
I am trying to retrieve a lightning component from another component.   however when I try it comes back as undefined.  I have used this code in other components and it works but I  cannot see why it is not working with this one.  Am I overlooking something?


code:
viewAllActivities: function(component, event, helper) {
    console.log('modalEvent 1 clicked');
    var modalEvent = $A.get("e.c:ModalEvent");
    console.log('modalEvent 1 ' + modalEvent);
    modalEvent.setParams({
      "modalName": "c:retailDashboard_SellRed_Modal",
      "modalAction": "open",
      "modalData": {
        "parentId": ""
      }
    });
    console.log('modalEvent 2 ' + modalEvent);
    modalEvent.fire();
  },

Modal
<aura:event type="APPLICATION" description="Event to control modals within the OFI_ModalManager">
    <aura:attribute name="modalName" type="String" description="Name of the Modal to be affected."/>
    <aura:attribute name="modalAction" type="String" description="Action to be performed: Open, Close."/>
    <aura:attribute name="modalData" type="Object" description="An object containing data to be passed to the Modal."/>
</aura:event>
I am trying to get the value from a HTML select element in a Lighting Component, I need to user select because I am unable to correctly style a lighting:select component.  I need to get the value of the component when it is changed, but cannot seem to get it the sameway I would if it was a lightning component.  Any help is appreciated. 
Lighting Component
    <div aura:id="header" class="header">
        <div class='titleInput'>
            REGION:
            <select name="select" label="" aura:id='select' class="select" onchange="{!c.changeRegion}">
                <aura:iteration items="{!v.regions}" var="regions">
                    <option text="{!regions}"></option>
                </aura:iteration>
            </select>
            - SALES AND REDEMPTIONS
        </div>

Component.Js
  changeRegion: function(component, event, helper) {
    console.log('onchange called 1 ');
    var inputRegion = component.find('select').get('v.value');
    console.log(inputRegion);
    //helper.getRegionalSalesRedemptions(component);
  },
Hi All,

I am looking for a way to limit some components to their specific environment, I have 3 components that are almost identical but perform the same basic tab, I have a mobile component that I only want available in mobiel and do not want the user to see it in Lightning Experience, a VF Tab that I only want the user to see in Classic and a Lightning Tab that I only want the user to see in lightning.  Is there a way to accomplish this?
Hello,

I am  using a datatable component in a sfdc lighting component, when I veiw the component in Salesforce Classic it loads and looks fine, however in lighting experience the jquery components do not load.  A copy of my cod eis below

Component
<aura:component controller="ActivityFirmComponentControllerSCRewrite" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
  <ltng:require styles="{! $Resource.    datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"
                    scripts="{!join(',',
                             $Resource.jquery224 ,
                             $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                             }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="modalData" type="String" access="GLOBAL" description="The page data"/>
    <aura:attribute name="parentId" type="String" description="The Firm Id to be passed to the query." />
    <aura:attribute name="urlEvent" type="String"/>
    <aura:attribute name="urlTask" type="String"/>
    <aura:attribute name="urlCall" type="String"/>
    <aura:attribute name="urlEdit" type="String"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="AllActivities" type="List"/>
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    <c:OFI_Modal class="slds-fade-in-open slds-modal--large" header="All Activities">
        <aura:if isTrue="{!v.Spinner}">
            <div aura:id="spinnerId" class="slds-spinner_container">
                <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
        </aura:if>
        <center>
        <lightning:buttonGroup >
            <lightning:button  class='topBtn' label="New Event" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="New Task" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="Log a Call" onclick="{!c.goToUrl}"></lightning:button>
        </lightning:buttonGroup>
      </center>
        <div class="slds-m-around_large"  style="overflow: auto; overflow-y: hidden;">
          <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%" >
              <thead>
                  <tr >
                      <th style="color:#005fb2" >Due Date</th>
                      <th style="color:#005fb2">Primary Contact</th>
                      <th style="color:#005fb2">Activity Type</th>
                      <th style="color:#005fb2">Subtype</th>
                      <th style="color:#005fb2">Subject</th>
                      <th style="color:#005fb2" class=".slds-has-flexi-truncate">Description</th>
                      <th style="color:#005fb2">Assigned To</th>
                      <th style="width:5%;color:#005fb2">View</th>
                  </tr>
              </thead>
              <tbody>
                <aura:iteration  items="{!v.AllActivities}" var="a">
                  <tr style="background-color:white; " class="dataRow">
                      <td>{!a.actDueDate}</td>
                      <td>{!a.actPrimaryContact}</td>
                      <td>{!a.actType}</td>
                      <td>{!a.actSubType}</td>
                      <td>{!a.actSubject}</td>
                      <td>{!a.actFullDesc}</td>
                      <td>{!a.actAssigned}</td>
                      <td class='view'><lightning:button class='rowBtn' variant="base" label="View" title="{!a.actId}" onclick="{! c.goToRecord }"/></td>

                  </tr>
                </aura:iteration >
              </tbody>
            </table>
        </div>
        <aura:set attribute="footer">
            <lightning:button label="Close" onclick="{!c.closeModal}"></lightning:button>
        </aura:set>
    </c:OFI_Modal>
    <div aura:id="backdrop" class="slds-backdrop slds-backdrop--open"></div>
</aura:component>

Component.js

({
  scriptsLoaded: function(component, event, helper) {
    console.log('Script loaded..');
  },

  init: function(component, event, helper) {
    var modalData = component.get("v.modalData");
    var parentId = component.get("v.modalData.parentId");
    //call apex class method

    var action = component.get('c.getAllActivities');
    action.setParams({
      "parentId": component.get("v.modalData.parentId"),
      "modalData": component.get("v.modalData")
    });
    action.setCallback(this, function(response) {
      //store state of response
      var state = response.getState();
        console.log('state is '+state);
      if (state === "SUCCESS") {
          console.log('state is success');
        //set response value in lstOpp attribute on component.
        component.set('v.AllActivities', response.getReturnValue());
        
        // when response successfully return from server then apply jQuery dataTable after 500 milisecond
        setTimeout(function() {
            console.log('timeout function set');
          var table = $('#tableId').DataTable();
                        console.log('table is '+table);
          // add lightning class to search filter field with some bottom margin..
          $('div.dataTables_filter input').addClass('slds-input');
            console.log('add class');
          $('div.dataTables_filter input').css("marginBottom", "10px");
                        console.log('add css');

        var order = table.order();
            table
            .order( [ 0, 'desc' ] )
            .draw();
             console.log('order');
            
        }, 500);
                console.log('500ml');
          
      }
    });
    component.set("v.parentId", parentId);
    console.log('check point 2');

    var urlEvent = "/setup/ui/recordtypeselect.jsp?ent=Event&retURL=%2Fa07J000000F0rlH&save_new_url=%2F00U%2Fe%3Fwhat_id=" + parentId + "&retURL" + parentId;
    var urlTask = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/a07J000000F0rlH&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
    var urlCall = "/setup/ui/recordtypeselect.jsp?ent=Task&tsk12=Completed&Task&tsk5=Call&Task&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26retURL%3D%252F%2Fapex%2FredirectToNewTask?rId=" + parentId + "&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&what_id=" + parentId;
    component.set("v.urlEvent", urlEvent);
    component.set("v.urlTask", urlTask);
    component.set("v.urlCall", urlCall);
    console.log('check point 3');
    $A.enqueueAction(action);
  },
Is there a way to stop the drop down that give and option to wrap or clip text in a lightning data table?

User-added image