Questions tagged [lightning-design-system]

Questions related to Lightning CSS Framework called Salesforce Lightning Design System or SLDS for short. Specifically questions on how to use, getting certain features to work, and questions related to any of the suggested code or use cases on the Lightning Design System Website: https://www.lightningdesignsystem.com/ Lightning Experience UI, Lightning Components, Visualforce, and Lightning App Builder are all different but related tags.

Filter by
Sorted by
Tagged with
4
votes
2answers
3k views

Getting original element from onclick?

I am trying to implement an onclick listener that will take the div clicked and get the data-id from the element and call an apex method with it. Here is my code snippet. <aura:iteration var="...
4
votes
0answers
782 views

Lightning Design System Table Footer

I'm using the Lightning Design System to style an apex:dataTable in Visualforce, and so far, all is well. It looks beautiful, the size is right, the headers show as expected. I'm embedding it in a ...
3
votes
2answers
996 views

Lightning datepicker for visualForce page

I have a field with date/time dataType and using that field in VF page, initially date picker was not visible then changed standard stylesheet = "true" (is this the only option) and everything works ...
3
votes
1answer
295 views

How to use lightning base components

I'm trying to use lightning base components in some components but I only got basic html component in my page. For example I add this button : <lightning:button variant="brand" label="Précédent" ...
3
votes
2answers
2k views

How do you Expand All/Collapse All in lightning:accordion

I'm trying to Expand All/Hide All in lightning:accordion Lightning aura component. <aura:iteration items="{!v.pboW.listPb}" var="pbW"> <lightning:accordionSection name="{...
3
votes
2answers
4k views

Lightning:inputField does not show picklist values based on record type

Has anyone been able to successfully show picklist values based on record type using lightning components? We have 4 record types and for some reason all record types is defaulting to the RSO record ...
3
votes
1answer
1k views

what are good prototyping tools for Lightning Experience? [closed]

I am looking for some tools that I can design Lightning Experience prototypes in.
3
votes
2answers
2k views

How to use progress ring with lightning component

In recent release salesforce has released progress ring part of SLDS. https://www.lightningdesignsystem.com/components/progress-ring/#content I am little confused on how to use this with lightning ...
3
votes
1answer
5k views

Add background border color for required field in Lightning Component

I am using the required attribute on the ui:inputText in a component. Is there a way to implement when required fields that are not filled out get the red border around them after submitting? same ...
3
votes
1answer
130 views

Render VF Page as PDF with LDS

I have a lightning component that I need in the form of pdf. Since we can't do this in the lightning component. I have to switch back to VF Page for pdf generation. Looks like when we use SLDS in vf ...
3
votes
1answer
196 views

Dynamically changing lightning button icon name with setAttribute not working

I'm trying to change the icon of a lightning button icon but the image isn't changing however I see that the attribute is being updated. this.template.querySelector('#'+event.target.id).setAttribute(...
3
votes
1answer
1k views

Dynamic lightning:map assistance

I'm working on a dynamic mapping system wherein users input an address and can then have a google map displayed relating to accounts within a radius of that address. I've got it so my list of ...
3
votes
1answer
4k views

$A.util.removeClass not working in some cases

On init of a component, I want to hide an element lightning:buttonIcon if some condition is satisfied(see controller code). In this case it is getting satisfied and I am reaching the code where ...
3
votes
2answers
937 views

can user customize tabs in lightning

can user customize tabs in lightning like we do in classic. If we have 3 users in profile system admin, then these 3 users can customize the tabs for themselves? because via App assignment tabs are ...
3
votes
1answer
158 views

How do I produce a “New” record button to look like a standard “New” button?

Basically I want to create an input area for a new record. I'm trying to get it styled like the standard "New" Button. I have tried doing it via Visualforce but it looks like a completely separate ...
3
votes
2answers
7k views

Scroll Page to top onClick of a button in Saleforce1

I have a problem scrolling to the top of a lightning component page in Salesforce1. I have tried using window.scrollTo(0,0); Added the below attribute in the button tag oncomplete="window....
3
votes
2answers
1k views

Close Lightning Modal by clicking anywhere outside of it

Just wondering whether this is possible? i.e. once a modal is open, close it by clicking anywhere on the grey backdrop? I've tried invoking my custom close-modal function via: - Adding onclick to the ...
3
votes
3answers
2k views

Need to enable focus on <ui:inputTextArea /> lightning component field

I am using a button to open a modal and inside a modal there is some form fields and I when user a modal then <ui:inputTextArea /> should be automatically on focus mode so a user can directly ...
3
votes
1answer
758 views

CSS applied to the elements in lightning components

html element in component : sample.cmp <div class="slds-text-heading--large heading"> Activity Dashboard </div> sample.css .THIS .heading{ padding: 1rem; border-bottom: 2px ...
3
votes
2answers
979 views

Icon color <svgIcon> helper component (Community Lightning)

I'm using the helper component suggested on the Lightning Design System Icon documentation page for adding icons to Community components. I'd like to change the color of the icon, and not use a ...
3
votes
1answer
2k views

Lightning Component SVG Not Rendering in Community

Using Community Builder, I have an svg component that's not properly rendering an icon (using SLDS 1.2.2). I've followed the docs exactly as written for the components: my outer-component that I am ...
3
votes
2answers
3k views

Lightning SVG Icon Component Helper - SVG class not being set

I am quite lame with CSS, but noticed something about this helper. var classname = component.get("v.class"); var containerClassName = [ prefix+"icon__container", prefix+"icon-"+category+"-"+...
3
votes
3answers
105 views

Not able to add dynamic style based on device

I am trying to add dynamic style one of lightning layout, the code goes till the device identification yet it doesn't apply the proper style. Here is my code:- <lightning:layout aura:id="...
3
votes
1answer
984 views

Help Text On Fields of Custom Lightning Component

I have a lightning component in which i want to display help text for the fields. I can use for sure. But is there any way to get the help text from backend. I mean when we create the field in the ...
3
votes
1answer
1k views

Open multiple section at once using standard <lightning:accordion> component

Using the standard component <lightning:accordion> is it possible to open multiple sections together?
3
votes
1answer
1k views

VF Page Migration To Lightning Experience SF one Navigation URL issue

We have a VF page which we are migrating to "Lightning Experience" using <apex:slds /> and <body class="slds-scope">. Page looks good in Lightning Experience, but when running "...
3
votes
2answers
5k views

How to use force:createRecord for a stand alone app or lightning out?

I'm trying to use force:createRecord and it works okay in Lightning Experience, and S1 but but I get the following error message when I am using a stand alone app. If I preview the "...
3
votes
1answer
85 views

Is there any documentation available which helps in applying LDS to aura ui components?

It seems that LDS has lots of features but when you try to use that with Lightning components, it can not be used like for ui:radioInput where id in the for clause is requird. There you can not set id ...
3
votes
2answers
2k views

Community : Salesforce Tabs + VF Template using Lightning Components

I have a community which uses "Salesforce Tabs + Visualforce" template. So, most of the stuff is customised using Visualforce pages including Login/Logout Pages. Now, I'm trying to understand how ...
3
votes
3answers
794 views

Salesforce lightning on / off switch

I'd really like to use on / off toggle switches on my VF / lightning pages rather than a checkbox. Such as these used in the lightning setup pages Are these available to developers as part of the ...
3
votes
2answers
1k views

lightning design system lookup component not working

I realize this is a prototype but I can't even make sense of the base example shown here: http://www.lightningdesignsystem.com/components/lookups#overview&role=regular&status=all I assume ...
3
votes
2answers
76 views

Salesforce Lightning Enhanced Notes in Component

Is it possible to open out of the box "Salesforce Lightning Enhanced Notes" editor on click of a link / button so that we have more control over our lightning UI screen. If we see on below screenshot,...
3
votes
2answers
168 views

Pull an item outside of slds-grid

Trying to get a design that is configurable as either one or two columns. This uses a recordEditForm which make it challenging as the button MUST be between the recordEditForm tags. current code: &...
3
votes
1answer
3k views

lightning:combobox component without placeholder

I have following code which displays a list of Users in the system. It is showing the list of Users. By default the first option I see is "Select an Option" and I want the first User in the list to be ...
3
votes
1answer
51 views

App exchange security review - Is it mandatory to follow the SLDS guidelines while designing VF pages?

To create an app that is lightning ready, is it necessary that visualforce pages follow the SLDS guidelines to pass the app exchange security review? The app that I am working on has mostly custom ...
3
votes
1answer
5k views

I have lightning component and want to show lightning card when mouse over on the link,

I have lightning component and want to show a lightning card on mouseover on the link, is there any lightning event I can call to show to popup mobile card? this is my code: ===apex-Controller=== ...
3
votes
2answers
2k views

Embedding PDF in Lightning component

I have a PDF stored in Document Folder. I want to display this PDF in my lightning component. How should I do this?
3
votes
1answer
2k views

ui:inputCheckbox and lightning design system

I'm trying to apply styles for checkboxes from Lightning Design System in my custom Lightning component. I would like to use <ui:inputCheckbox> standard lightning component, but looks like not ...
3
votes
1answer
34 views

How to use new slds charts in lightning componets

I could see that, salesforce release new feature in SLDS charts under Design Guidelines. https://www.lightningdesignsystem.com/guidelines/charts/ I cannot see any explanation of how we can use these ...
3
votes
1answer
391 views

How should I import Design System React css?

I tried using Lightning Design System React doing what's under the Getting Started section. I've installed the npm modules as explained: npm install @salesforce-ux/design-system @salesforce/design-...
3
votes
1answer
343 views

Recommendations to style Visualforce page to match the SLDS?

Does anyone have insight into the best practice to style a Visualforce page to match the SLDS for inclusion in a lightning component and printing? I can hear the choirfolk chanting: Visualforce is so ...
3
votes
3answers
2k views

Rendered as PDF apply Lightning Design System

I want to known suggestion about lightning design system rendered as PDF. I have a VF page that page rendered as PDF format. My page is also using lightning design system. but that designs are not ...
3
votes
2answers
3k views

Fixed div in Salesforce1 using lightning components

Although this may not be salesforce specific issue but its remotely related to Salesforce and occurring only in Salesforce1 mobile app. I am trying to fix a div at the bottom of my screen using the ...
3
votes
1answer
1k views

TrailHead Error: Faraday::ResourceNotFound. Message: NOT_FOUND: The requested resource does not exist

I am working TrailHead project related to Lightning connect, as part of the challenge synced external objects into Dev Org and changed one of the field type to external lookup relation. every thing ...
3
votes
1answer
3k views

Lightning Design Multi-select Component on vf page

I have a custom edit vf page with multiple sections. I'm trying to use the multi-select lightning design component on a pageblock section but the page alignment looks weird. The component looks good ...
3
votes
2answers
584 views

Pulling records by parent ID with visualforce SLDS remote objects

I'm trying to pull fields in my custom object by matching it with the parent Id in Visualforce with the new Lightning design. I've done it with Apex but am a little confused with remote objects. I ...
3
votes
2answers
166 views

Open LWC as a full page without salesforce header

I have a button on Lightning Record page. On click i am redirecting to a LWC. Is there anyway where i can redirect or open the LWC in a full screen page. As of now it is opening with salesforce main ...
3
votes
0answers
2k views

Can Lightning SLDS icons be displayed in formula field without using static resources?

I want to display an icon in a formula field based on the value in another checkbox field on my object. I would like to use the standard Lightning SLDS icons here. I've found a way to achieve this ...
3
votes
1answer
173 views

Is it possible to hide the masterLabel from outputting onto the page in Salesforce Mobile?

I created a custom lightning:appHomeTemplate with custom columns and rows. However, the only thing I wanting to do now to finish this, is to not have the Label output into the app page. The Label ...
3
votes
2answers
9k views

$A.util.addClass not working on components that are inside aura:if

I have some buttons inside a component that are by default hidden, but are shown when certain event is received. When I receive the event, I am using $A.util.addClass() and $A.util.removeClass() to ...

1 2
3
4 5
15