Hi All,

I have a scenario where i have to pass one variable value from parent component to child component controller to perform further execution on the basis of that variable value which we passed from parent.

Please let me know the solution/syntax for the same.

Thanks,
Abhinav Sharma

Apologies for the cross-post, I'm not sure where the devs are hanging out, and I'm not sure where I'm supposed to file LockerService cases... 

Here is my stack exchange question:
http://salesforce.stackexchange.com/questions/129894/lockerservice-not-allowing-subscribing-to-a-logger

I've been using the technique described here:
https://developer.salesforce.com/forums/?id=906F0000000B1MiIAK

But now this is throwing an error.

Thanks!

Hey all!

In writing my to-be-released app for the App Exchange I wanted to be able to have a "mobile app" style view controller for rending on mobile. Since I'm writining in all Lighting I looked around and didn't see exactly what I was looking for. I put together this demo which I plan to extend.

Code is here:
https://gist.github.com/xmas/fc0b058e3335e0055e14b1e312416e95

Video is here:
https://youtu.be/Y3NGZ3Ez-0M

Feedback, improvements or a better way to do this entirely are most welcome!



 

Hi all,

I was hoping to use this component: http://peterknolle.com/lightning-component-autocomplete/ for doing Autocomplete in Lightining. But it seems to not have been updated to use ltng:require.

The post references Skip Sauls "require" component (https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BX ), which I believe is out of date with the introductin of ltng:require, and that component doesn't seem to install anymore anyways :)

I switched out to using: 

<ltng:require scripts="/resource/jquery_js, /resource/jquery_ui_js" styles="/resource/jquery_ui_css" afterScriptsLoaded="{!c.doInit}"/>

In place of the require plugin. But I am consisntly getting this error:
 

​ReferenceError: Can't find variable: jQuery
(anonymous function)jquery_ui_js:5
(anonymous function)jquery_ui_js:5:84

Which seems like jquery-ui is getting loaded in a weird way? The static resources for each of these files is correct, and the web inspector shows all the resources correctly loaded after the fact. Is there something else I should be doing to get this to all work, or is there a better solution to doing autocomplete in Lightning?

Thanks!
 

Hey kind folks,

I'm trying to figure out how to return a custom class for an aura:iteration. There are some things (specfically TopicAssignments) that I don't have a relationship to from my object, so I can use the SOQL join functions.

I am doing the following in apex:
 

// make a class that will get returned and has the reference to the data I need
public class InsightData {
        
        @AuraEnabled
        public Insight__c insight;
        
        @AuraEnabled
        public String test_name;
        
        @AuraEnabled
        public String LongName;
}

// the apex code for building and returning the data objects
// just doing test data for now while I try to figure this out
public class InsightsController {

     @AuraEnabled
    public static List<InsightData> getInsights() {
        List <Insight__c> insights = [SELECT Id, Long_Name__c, Data_Source__c, Details__c, LastModifiedDate,
                Data_Source_Icon_URL__c, Directly_Responsible_User__c, OwnerId, Chart__c
                FROM Insight__c ORDER BY CreatedDate DESC];
        
        List <InsightData> dataList = new List <InsightData> ();
        for (Integer i = 0; i < dataList.size(); i++) {
            Insight__c insight = insights[i];
            InsightData data = new InsightData();
            data.insight = insight;
            data.LongName = insight.Long_Name__c;
            data.test_name = 'Insight #:'+i;
            dataList[i] = data;
        }
        return dataList;
    }
}

From what I've read online this should work... if there is a better way to do otherwise unallowable JOINs, I'd love to hear about the solution as well.

Thanks!
 

Hi All, 

I have the following code:
 

<aura:iteration items="{!v.insights}" var="insight">
        {!insight.Name}
        <br></br>
        {!insight.LastModifiedDate}
        <hr></hr>
    </aura:iteration>

This works fine for "Name". What am I doing wrong to access the LastModifiedDate?

Thanks!

Hi All,

I have the following:
 

<aura:iteration items="{!v.insights}" var="insight">
        {!insight.Name}
        <br></br>
        {!insight.LastModifiedDate}
        <hr></hr>
    </aura:iteration>

The NAME field works great. The LastModifiedDate does not... I've verfifed via SOQL queries that values exist... what am I missing?
 

I feel like I'm missing some obvious... 

Here is a Lighting test component based on https://www.lightningdesignsystem.com/components/data-tables#responsive-stacked-horizontal. 
 

<aura:component implements="flexipage:availableForAllPageTypes, force:appHostable">
    <ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label">
                <th class="slds-row-select" scope="col">
                    <label class="slds-checkbox" for="select-all">
                        <input name="checkbox" type="checkbox" id="select-all" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select all</span>
                    </label>
                </th>
                <th class="slds-is-sortable" scope="col">
                    <span class="slds-truncate">Opportunity Name</span>
                    <button class="slds-button slds-button--icon-bare">
                        <span class="slds-assistive-text">Sort</span>
                    </button>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Account Name</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Close Date</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Stage</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Confidence</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Amount</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Contact</span>
                </th>
                <th class="slds-row-action" scope="col">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row1">
                        <input name="select-row1" type="checkbox" id="select-row1" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row1</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Acme 25</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Acme</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">4/14/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">20%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$25k</span>
                </td>
                <td data-label="contact">
                    <span class="slds-truncate">--</span>
                </td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row2">
                        <input name="select-row2" type="checkbox" id="select-row2" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row2</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Rohde Corp 30</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Rohde Corp</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">6/18/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">40%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$30k</span>
                </td>
                <td data-label="contact"><a href="#" class="slds-truncate">achoi@rohdecorp.com</a></td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</aura:component>

Create an app like:
 

<aura:application >
<ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <div class="slds" style="margin-top:10px;margin-left:10px;margin-right:10px">
        <c:CSSTest />
    </div>
</aura:application>

... loads up on my desktop browser using "Preview" from the developer console, no problem. All responsive and styled.

However, when I add this using the Lighting App Building to make a new "app" for Salesforce1, it loses the Lightning Design System styles. Any idea what I'm missing and/or doing wrong? Is there an embedded "salesforce-lightning-design-system-ltng.css" in Salesforce1 that I am supposed to reference? Or am I supposed to do something else fancy?

From what I can tell none of the tutorials on Trailhead or elsewhere cover this, so  any advice is most appreciated.

Thanks!
 

Hello!

So in going through the Trailhead modules SLDSX (https://github.com/ForceDotComLabs/sldsx) was referenced. This seems like a great way to reduce code written for a new Lighting Component. 

However, it seems like it's not being actively developed. Is this something that Salesforce is promoting for use? Or is there a similar libary of component that I should look at?

Thanks!

I was having that problem by using a js from a static resource. I called the script like this:

<ltng:require scripts="{'resource/AdapterSR/adapter-master/src/js/adapter_core.js'}"
                  afterScriptsLoaded="{!c.doInit}"/>

I dont know what is happening. If its because of the lockerservice or what. 

I sincerely appologize for the very long code, I have been working on this for a really long time but it is still not working...Please help

I have 4 lightning components

The main Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    <aura:handler event="c:NavigateToAddMedicineComponent" action="{!c.NavigateMedicineComponent}"/>
        {!v.body}
</aura:component>

The MainComponentController
({
    doInit : function(component, event, helper) {
    $A.createComponent(
        "c:MyLightComponent",
    {
 
    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },
    
    NavigateComponent : function(component,event,helper) {
    $A.createComponent(
        "c:ContactDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },
    
    NavigateMedicineComponent : function(component,event,helper) {
    $A.createComponent(
        "c:EnterMedicineDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {
            
            component.set("v.body", newCmp);
        }
    });
    }
})

MyLightComponent
<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:registerEvent name="navigate" type="c:NavigateToContactDetail"/>
    <aura:attribute name="contacts" type="Contact[]" />
    
    <div>
        <ui:inputText aura:Id="searchTerm" label="Contact Name"    placeholder="Enter a Contact Name"></ui:inputText>
        <ui:button label="Search" press="{!c.search}"></ui:button>
    </div>
    
    
<ul>
<aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
    <li class="minli"> 
            <h3>
                <a onclick="{!c.viewRecord}" style="width:100%;" data-index="{!index}">{!contact.Name}</a>
            </h3>
        </li>
    </aura:iteration>
</ul> 
</aura:component>

MyLightComponentController
({
    search : function(component, event, helper) {
        helper.helperSearch(component,event);
        console.log('helper');
    },

    viewRecord : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToContactDetail");
         var idx = event.target.getAttribute('data-index');
         var contact = component.get("v.contacts")[idx];
         if(navEvent){
             navEvent.setParams({
                  recordId: contact.Id,
             });
             navEvent.fire(); 
         }

    },

})


MyLightComponentHelper
({
    helperSearch : function(component,event) {
        var searchText = component.find("searchTerm").get("v.value");
        var recordLimit = component.get("v.maxResults");
        var action = component.get("c.getContacts");
        
        action.setParams({
            searchTerm: searchText,
            maxResults: recordLimit
            
        });
        
       action.setCallback(this, function(data) {
        component.set("v.contacts", data.getReturnValue());
        });
        
        $A.enqueueAction(action);
       }
})

NavigateToContactDetailEvent
<aura:event type="APPLICATION">
 
<aura:attribute name="recordId" type="Id"/>
 
</aura:event>


ContactDetailsLightningComponent
<aura:component controller="contactSearch" implements="force:appHostable">
    <aura:attribute name="contactRows" type="Contact[]" />
    <aura:attribute name="contactId" type="Id" />
    <aura:registerEvent name="navigate" type="c:NavigateToAddMedicineComponent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--The result is {!v.contactId}-->
    <aura:iteration items="{!v.contactRows}" var="contact">
        <li class="minli"> <h3>{!contact.Name}</h3> </li>
        <li class="minli"> <h3>{!contact.Email}</h3> </li>
    </aura:iteration>
    <ui:button label="Add New Dose" press="{!c.insert}"></ui:button>
</aura:component>

ContactDetailsLightComponentController
({
    doInit : function(component, event, helper){
        helper.getContactDetails(component);
    },
        insert : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToAddMedicineComponent");
         var contactId = component.get("v.contactId");
         if(navEvent){
             navEvent.setParams({
                  recordId: contactId,
             });
             navEvent.fire(); 
         }

    },
})

ContactDetailsLightningComponentHelper
({
    getContactDetails : function(component, event, helper) {
        var contactId = component.get("v.contactId");
        var action = component.get("c.getAllDetails");
        action.setParams({
            contactId: contactId            
        });
        action.setCallback(this, function(a){
            component.set("v.contactRows", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

NavigateToAddMedicineComponent.evt
<aura:event type="APPLICATION">
 
<aura:attribute name="recordId" type="Id"/>
 
</aura:event>

EnterMEdicineDetailsLightningComponent
<aura:component controller="contactSearch">
    <aura:attribute name="contactId" type="Id" />
    <ui:inputText aura:Id="medicineName" label="Medicine Name"    placeholder="Medicine Name"></ui:inputText>
    <ui:inputText aura:Id="medicineDose" label="Medicine Dose"    placeholder="Medicine Dose"></ui:inputText>
    <ui:inputText aura:Id="medicineStartDate" label="Medicine Start Date"    placeholder="Medicine Start Date"></ui:inputText>
    <ui:button label="Save" press="{!c.insert}"></ui:button> 
</aura:component>

EntermedicineDetailsLightningComponentController
({
    insert : function(component, event, helper) {
        helper.helperInsert(component,event);
    }
})

EnterMedicineDetailsLightningComponentHelper
({
    helperInsert : function(component,event) {
        var medicineName = component.find("medicineName").get("v.value");
        var medicineDose = component.find("medicineDose").get("v.value");
        var medicineStartDate = component.find("medicineStartDate").get("v.value");
        var contactId = component.get("v.contactId");
        var action = component.get("c.insertMedicine");
            
        action.setParams({
            medicineName: medicineName,
            medicineDose: medicineDose,  
            medicineStartDate: medicineStartDate,              
        });
        
        $A.enqueueAction(action);
       }
})


The first two components are working fine but the third component EnterMedicineDetailsLightningComponent is throwing an error. I am very new to lightning and I really need help
 

Hi,

As per aura documentations, we can iterate over a List in aura iteration.
I am trying to create a nested aura iteration. The outer iteration will be on List< Account> accList and the inner iteration will iterate on List which will be obtained from the map Map< Id, List< Contact>> accContactMap.

I am trying to use the List in aura iteration like.
 

<aura:iteration items="{!v.accList}" var="account" indexVar="indexAcc">
<table class="slds-table slds-table--bordered slds-table--striped" style="margin-top:30px;">
    <tbody>
        <tr>
            <td>{!account.Name}</td>
        </tr>
        <tr>
            <!-- Use the account.Id to get the value of the map -->
            <aura:iteration items="{!v.accContactMap[account.Id]}" var="contact" indexVar="indexAcc">
                <table class="slds-table slds-table--bordered slds-table--striped" style="margin-top:30px;">
                    <tbody>
                        <tr>                
                            <td><div onclick="{!c.editContact}" data-index="{!indexCon}" style="color:#0070d2;cursor: pointer;">Edit</div></td>
                            <td>{!contact.Name}</td>
                        </tr>

                    </tbody>
                </table>
            </aura:iteration>                            
        </tr>                    
    </tbody>
</table>
</aura:iteration>

However, I am getting the following error. "Failed to save undefined: expecting a positive integer, found 'section' at column 14 of expression: v.formQueMap[section.Id]: Source". I tried using items="{!v.accContactMap.get('account.Id')}" with no luck.

Hai, 

Does any one know how to view the record based on onclick function by using force:recordView in lightning components.

Many Thanks,
Help will be appreciated as soon as possible.

Hi All,

I have a scenario where i have to pass one variable value from parent component to child component controller to perform further execution on the basis of that variable value which we passed from parent.

Please let me know the solution/syntax for the same.

Thanks,
Abhinav Sharma

Hi all,

I was hoping to use this component: http://peterknolle.com/lightning-component-autocomplete/ for doing Autocomplete in Lightining. But it seems to not have been updated to use ltng:require.

The post references Skip Sauls "require" component (https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BX ), which I believe is out of date with the introductin of ltng:require, and that component doesn't seem to install anymore anyways :)

I switched out to using: 

<ltng:require scripts="/resource/jquery_js, /resource/jquery_ui_js" styles="/resource/jquery_ui_css" afterScriptsLoaded="{!c.doInit}"/>

In place of the require plugin. But I am consisntly getting this error:
 

​ReferenceError: Can't find variable: jQuery
(anonymous function)jquery_ui_js:5
(anonymous function)jquery_ui_js:5:84

Which seems like jquery-ui is getting loaded in a weird way? The static resources for each of these files is correct, and the web inspector shows all the resources correctly loaded after the fact. Is there something else I should be doing to get this to all work, or is there a better solution to doing autocomplete in Lightning?

Thanks!
 

I've been working with developing a stand-alone app in lightning. In trying to adhere to the look and feel I'm following the html layed out in https://www.lightningdesignsystem.com/components/tabs. Sorry if this is a newb question how do I manipulate the class of the <a> being clicked to .slds-active and it's corresponding <div> to .slds-show , and then remove any other existing <a> with the .slds-active and change the <div> to .sld.slds-hide?  I've seen something similiar with javascript on a visualforce page but I wanted to follow the component design structure. Surely someone has done this as it seems pretty standard navigation. Currently my component has

<div class="slds-tabs--default">
 <ul class="slds-tabs--default__nav" role="tablist">
   <li class="slds-tabs--default__item slds-text-heading--label slds-active" title="Item One" role="presentation">
   <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" data-data="tab-default-1__item"  onclick="{!c.selectTab}" id="tab-default-1__item">New Checklists</a>
        </li>
  <li class="slds-tabs--default__item slds-text-heading--label" title="Item Two" role="presentation">
            <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" data-data="tab-default-2__item" onclick="{!c.selectTab}" id="tab-default-2__item">Existing Checklist</a>
        </li>
      </ul>
      <div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
        <h2>Item One Content</h2>
      </div>
      <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
        <h2>Item Two Content</h2>
      </div>

    </div>

I have the onClick="{!c.selectTab}" which goes to my js controller. Below

selectTab : function(component, event, helper){
    	var activeTab;
        activeTab = event.target.getAttribute("id");
        //var result = component.find("tab-default-1__item");
        //alert(result);
  
    },

I see the event.target.getAttribute gives me the value of the onclick id. I can get the value and can then tell which tab was clicked, but then how do I 

1. Change the class value of that Id?
2. Change the class value of other id's?

I've been trying to use various javascript  functions like find but nothing seems to be working. Can someone point me to which functions I should be using to find id(DOMS) on a component and which functions can be used to set vairous attributes?  I didn't find anything in the lightning dev guide but will keep looking. Any help is appreciated.
 

Hi All, 

I have the following code:
 

<aura:iteration items="{!v.insights}" var="insight">
        {!insight.Name}
        <br></br>
        {!insight.LastModifiedDate}
        <hr></hr>
    </aura:iteration>

This works fine for "Name". What am I doing wrong to access the LastModifiedDate?

Thanks!

I feel like I'm missing some obvious... 

Here is a Lighting test component based on https://www.lightningdesignsystem.com/components/data-tables#responsive-stacked-horizontal. 
 

<aura:component implements="flexipage:availableForAllPageTypes, force:appHostable">
    <ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label">
                <th class="slds-row-select" scope="col">
                    <label class="slds-checkbox" for="select-all">
                        <input name="checkbox" type="checkbox" id="select-all" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select all</span>
                    </label>
                </th>
                <th class="slds-is-sortable" scope="col">
                    <span class="slds-truncate">Opportunity Name</span>
                    <button class="slds-button slds-button--icon-bare">
                        <span class="slds-assistive-text">Sort</span>
                    </button>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Account Name</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Close Date</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Stage</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Confidence</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Amount</span>
                </th>
                <th scope="col">
                    <span class="slds-truncate">Contact</span>
                </th>
                <th class="slds-row-action" scope="col">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row1">
                        <input name="select-row1" type="checkbox" id="select-row1" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row1</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Acme 25</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Acme</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">4/14/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">20%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$25k</span>
                </td>
                <td data-label="contact">
                    <span class="slds-truncate">--</span>
                </td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <td class="slds-row-select">
                    <label class="slds-checkbox" for="select-row2">
                        <input name="select-row2" type="checkbox" id="select-row2" />
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label slds-assistive-text">select row2</span>
                    </label>
                </td>
                <th data-label="opportunity-name" role="row"><a href="#" class="slds-truncate">Rohde Corp 30</a></th>
                <td data-label="account"><a href="#" class="slds-truncate">Rohde Corp</a></td>
                <td data-label="activity">
                    <span class="slds-truncate">6/18/2015</span>
                </td>
                <td data-label="stage">
                    <span class="slds-truncate">Prospecting</span>
                </td>
                <td data-label="confidence">
                    <span class="slds-truncate">40%</span>
                </td>
                <td data-label="amount">
                    <span class="slds-truncate">$30k</span>
                </td>
                <td data-label="contact"><a href="#" class="slds-truncate">achoi@rohdecorp.com</a></td>
                <td class="slds-row-action">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                        <span class="slds-assistive-text">Show More</span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</aura:component>

Create an app like:
 

<aura:application >
<ltng:require styles="/resource/SLDS0101/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <div class="slds" style="margin-top:10px;margin-left:10px;margin-right:10px">
        <c:CSSTest />
    </div>
</aura:application>

... loads up on my desktop browser using "Preview" from the developer console, no problem. All responsive and styled.

However, when I add this using the Lighting App Building to make a new "app" for Salesforce1, it loses the Lightning Design System styles. Any idea what I'm missing and/or doing wrong? Is there an embedded "salesforce-lightning-design-system-ltng.css" in Salesforce1 that I am supposed to reference? Or am I supposed to do something else fancy?

From what I can tell none of the tutorials on Trailhead or elsewhere cover this, so  any advice is most appreciated.

Thanks!
 

Hello!

So in going through the Trailhead modules SLDSX (https://github.com/ForceDotComLabs/sldsx) was referenced. This seems like a great way to reduce code written for a new Lighting Component. 

However, it seems like it's not being actively developed. Is this something that Salesforce is promoting for use? Or is there a similar libary of component that I should look at?

Thanks!

Hi Everyone,
how to navigate from component to another component in lightning app?
Pleae provide me code structure, it will be great help for me.

Thanks in Advance

Thanks & Regards

I'm using lightning component and I have create two component like below.

navigateSampleView1.cmp
<aura:component implements='force:appHostable'> <ui:button aura:id="normal" label="Go to SampleView2" press="{!c.pressButton}"/> </aura:component>

navigateSampleView1Controller.js
({ pressButton: function(component, event, helper) { var evt = $A.get("e.force:navigateToComponent"); evt.setParams({ componentDef: "c:navigateSampleView2", componentAttributes: { whom: "Lightning" } }); evt.fire(); } })

navigateSampleView2.cmp
<aura:component> <aura:attribute name="whom" type="String" default="world"/> Hello {!v.whom}! </aura:component>

Now, what I want to do is that navigate from navigateSampleView1 to navigateSampleView2, but the error is happened, please help me out!!
The error is "Uncaught error in $A.run() : Unknown component: markup://c:navigateSampleView2"