Salesforce Developer Community

Ananya Dhiman
NEWBIE
20 Points
Member since 2019

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
8

Questions
13

Replies

change standard lightning-select icon in LWC

Hi Developers,
I am trying to change an icon which appears by default when we use 'select' means custom dropdown in LWC but unable to do so. It appears like this :
User-added image
I want to hide the above standard down icon on the right position and replace it with this :

Here is the code below for COMPONENT :

<select class="c-select-menu" id="menu" onchange={doSomething}>
                    <option class="random" value="Make a selection">Make a selection </option>
                    <option class="random" value="otheroptions">< 4'10" (147cm)</option>
                    <option class="random" value="otheroptions">4'11" (150cm)</option>
                    <option class="random" value="5-0 (152cm)">5'0" (152cm)</option>
                    <option class="random" value="otheroptions">5'1" (155cm)</option>
                    <option class="random" value="otheroptions">5'2" (157cm)</option>
                    <option class="random" value="otheroptions">5'3" (160cm)</option>
                    <option class="random" value="otheroptions">5'4" (163cm)</option>
                    <option class="random" value="otheroptions">5'5" (165cm)</option>
                    <option class="random" value="otheroptions">5'6" (168cm)</option>
                    <option class="random" value="otheroptions">5'7" (170cm)</option>
                    <option class="random" value="otheroptions">5'8" (173cm)</option>
                    <option class="random" value="otheroptions">5'9" (175cm)</option>
                    <option class="random" value="otheroptions">5'10" (178cm)</option>
                    <option class="random" value="otheroptions">5'11" (180cm)</option>
                    <option class="random" value="otheroptions">6'0" (183cm)</option>
                    <option class="random" value="otheroptions">6'1" (185cm)</option>
                    <option class="random" value="otheroptions">6'2" (188cm)</option>
                    <option class="random" value="otheroptions">6'3" (191cm)</option>
                    <option class="random" value="otheroptions">> 6'4" (193cm)</option>
                </select>

CSS :

.c-select-menu{
    background: #fff;
    position: relative;
    border-radius: 0;
    border: 1px solid #cfcfcf;
    min-width: 300px;
    margin-left: 32rem;
    margin-right: 32rem;
    padding-right: 2rem;
    padding-left: 1rem;
    height: 55px;
    font-size: 17px;
    font-family: sans-serif;
    color: #22426d;
    font-weight: 700;
    cursor: pointer;
/*The below commented line is used to deplay the icon that is shown in the second image displayed above*/
   /* background: transparent url("https://demo.cloudberryclient.com/lho-prediabetes/r4/assets/images/select-chevron.svg") no-repeat right; */
}

Thank you so much in advance.

Ananya Dhiman

Ananya Dhiman
May 15, 2020
Like
0

1 replies

How to change the standard down icon in dropdown (select) in LWC

Hi Developers,
I am trying to change the down icon in custom select (dropdown menu) in lwc to chevrondown icon but can't seem to change. Can someone please help me. Here is the code:

Component :
<select class="c-select-menu" id="menu" onchange={doSomething}>
                    <option class="random" value="Make a selection">Make a selection </option>
                    <option class="random">< 4'10" (147cm)</option>
                    <option class="random">4'11" (150cm)</option>
                    <option class="random">5'0" (152cm)</option>
                    <option class="random">5'1" (155cm)</option>
                    <option class="random">5'2" (157cm)</option>
                    <option class="random">5'3" (160cm)</option>
                    <option class="random">5'4" (163cm)</option>
                    <option class="random">5'5" (165cm)</option>
                    <option class="random">5'6" (168cm)</option>
                    <option class="random">5'7" (170cm)</option>
                    <option class="random">5'8" (173cm)</option>
                    <option class="random">5'9" (175cm)</option>
                    <option class="random">5'10" (178cm)</option>
                    <option class="random">5'11" (180cm)</option>
                    <option class="random">6'0" (183cm)</option>
                    <option class="random">6'1" (185cm)</option>
                    <option class="random">6'2" (188cm)</option>
                    <option class="random">6'3" (191cm)</option>
                    <option class="random">> 6'4" (193cm)</option>
                </select>
CSS :
.c-select-menu{
    background: #fff;
    position: relative;
    border-radius: 0;
    border: 1px solid #cfcfcf;
    min-width: 300px;
    margin-left: 32rem;
    margin-right: 32rem;
    padding-right: 2rem;
    padding-left: 1rem;
    height: 55px;
    font-size: 17px;
    font-family: sans-serif;
    color: #22426d;
    font-weight: 700;
    cursor: pointer;
}
.c-select-menu select{
    -webkit-appearance: none;
    background: #fff;
    text-indent: .01px;
    cursor: pointer;
    height: 55px;
    border-radius: 0;
    border: none;
    padding: 17px 65px 17px 25px;
    color: #22426d;
    font-size: 17px;
    line-height: 20px;
    font-family: inherit;
    font-weight: 700;
    width: 100%;
}
.c-select-menu select:focus{
    outline: white;
    border-color: orange;
}
.slds-select_container::before{
    border-bottom: none;
}
.slds-select_container::after{
    border-top: none;
}
.slds-select_container .slds-select{
    width: 111%;
    float: right;
    margin-top: -2rem;
    -webkit-appearance: none;
    background: transparent url("https://demo.cloudberryclient.com/lho-prediabetes/r4/assets/images/select-chevron.svg") no-repeat right;
}
.slds-select_container{
    position: relative;
    padding-left: 30px;
    padding-top: 0.8rem;
}
Screenshot of the icon I want to change

Ananya Dhiman
May 12, 2020
Like
0

SOLVED

1 replies

If I want to switch career from salesforce developer to some other field in salesforce itself then what is the scope of it in IT companies???

Ananya Dhiman
May 05, 2020
Like
0

12 replies

Update fields on a custom object when user clicks on button

Hi developers, I am new to LWC and facing a little problem in acheiving my goal. I have a custom object named Livehealth__c and a web component. Whenever the user clicks on 'No' button, I want to update the following fields on my object : TotalPoints__c (type = number) and No__c (type = checkbox).
Scenario is : I want to change No__c = true when NO button is pressed and if it is true then I want to set TotalPoints__c = 0 and want to the similar funcationality on 3 more components.

Here is my code :

APEX :
public class live {
@AuraEnabled(Cacheable=true)
public static List<Livehealth__c> liveheal(Boolean str){
string jj = UserInfo.getUserId();
system.debug('id' + jj);

List<Livehealth__c> listobj = [Select Id, Name, UserId__c, Female__c, Male__c, No__c, Yes__c, Above40__c, Under40__c, TotalPoints__c from Livehealth__c
where Yes__c =: str];
system.debug('listofobject' + listobj);
return listobj;
}
}

LWC :
<template>
    <div if:true={dosomething}>
    <div class="slds-wrap">
        <div id="questions" class="c-questions">
            <div class="c-steps">
                <h1 class="c-steps__eyebrow" data-loc="questions-eyebrow"><b>Prediabetes risk assessment</b></h1>
                <div class="c-steps__wrap">
                    <div aria-hidden="true" class="current">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                    <div aria-hidden="true" class="">
                    </div>
                </div>
                <div class="c-steps__line"></div>
                <ul class="c-steps__titles slds-p-top_x-small slds-p-bottom_medium">
                    <li class="ccurrent">
                        <span>Diabetes</span>
                    </li>
                    <li class="age">
                        <span>Age</span>
                    </li>
                    <li class="age">
                        <span>Sex</span>
                    </li>
                    <li class="age">
                        <span>Family <br/> History</span>
                    </li>
                    <li class="age">
                        <span>BMI</span>
                    </li>
                    <li class="age">
                        <span>Ethnicity</span>
                    </li>
                    <li class="age">
                        <span>Blood <br/> Pressue</span>
                    </li>
                    <li class="age">
                        <span>Lifestyle</span>
                    </li>
                    <li class="age">
                        <span>Blood <br/> Test</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="slds-col slds-large-size_12-of 12" style="background:white; margin-top: -5rem;">
            <h2 class="head">Do you have diabetes (either type 1 or type 2)?</h2>
            <div class="twobuttons slds-grid slds-wrap">
                <button type="yes" class="one-button slds-button slds-button_neutral" tabindex="0" onclick={pressme}>Yes</button>     
                <button type="no" class="two-button slds-button slds-button_neutral" onclick={press}>No</button>
            </div>
        </div>
    </div>
    </div>
    <div if:true={show}>
        <c-lwc-y-e-s-s></c-lwc-y-e-s-s>
    </div>

    <div if:true={no}>
        <c-lwc-n-o></c-lwc-n-o>
    </div>

</template>

JS :
import { LightningElement , track , wire } from 'lwc';
import liveheal from '@salesforce/apex/live.liveheal';
export default class LwcPATH extends LightningElement {
    @track listdata;
    @track error;
    @track abc = false;
    @wire(liveheal , {str : '$abc'})
    result({data , error}){
      // debugger;
        if(data){
            this.listdata = data;
            this.error = undefined;
            console.log('listdata', this.listdata);
        }
        else if(error){
            console.log('error');
            this.error = error;
            this.listdata = undefined;
        }
        console.log('error--',error);
        console.log('initial list', this.listdata);
    }
    @track dosomething = true;
    @track show = false;
    @track no = false;
    @track integer;
    pressme(){
        this.show = true;
        this.dosomething = false;
     }
     press(event){
        debugger;
        this.no =  true;
        this.dosomething = false;
        console.log('listdata---',this.listdata);
        if(this.listdata.No__c == false){
            this.listdata.No__c = true;
        }
        this.integer = 0;
        if(this.listdata.No__c == true){
            this.listdata.TotalPoints__c = 0;
        }
    }
}

Thanks in advance.
Ananya

Ananya Dhiman
April 27, 2020
Like
0

1 replies

show a popup when a community user is logged in

Hi all, I need help with this task.

I need to create a lightning component that will display a popup with some text lines, 2 checkboxes (text message and email) and a field named mobile number and a FINISH button.
This popup should be displayed only when a community user is logged in. I have created 3 custom fields on contact namely - text message(checkbox), email(checkbox) and mobile number(number) that will store the information of the user.
Whenever a user clicks on any of the checkboxes mentioned above, the popup should never appear. Also, when a user clicks the text message checkbox on the popup then the mobile number field should be mandatory. It is more like a consent popup that will allow uses to receive notifications via email or text.

Your help will be much appreciated.
Thanks in advance.

Ananya Dhiman
February 12, 2020
Like
0

10 replies

Trigger on user object to auto populate fields on custom object

Hi Developers, I am new to salesforce, facing problem trying to figure out this question.

Reuirement - Write trigger on user and create a field on user named - DateOfUser__c of type text. Create a custom object named - New_Object__c with fields as MatchingDates__c (type - date) and a lookup field to user named RelatedUser__c.
Whenever a user is created with a single value in DateOfUser__c field (means date in the format of MM/DD/YY) then a record should be created on custom object with same name as user's name and same date should be auto populated in the custom object's MatchingDates__c field.
In addition to this if a user is created with multiple values seperated by ';' in DateOfUser__c field then records should be created on custom object based on the number of dates using spilt function.

For example if I create a user - Ananya with Values in DateOfUser__c as : '01/29/2020;01/30/2020' then 2 records should be created in custom object with same fields as user's fields.
Fields of user to use here are : Id, Name, DateOfUser__c
Fields of custom object to use here are : Id, Name, MatchingDates__c, RelatedUser__c

Any help will be much appreciated.
Thanks in advance. :)

Ananya Dhiman
January 29, 2020
Like
0

5 replies

I have to show a picklist which contains 4 standard objects i.e. Account, Case , Contact and Opportunity, so that when I click on an object another multi select picklist should be displayed which will contain all fields of that object in lightning cmp.

Hi everyone, I'm new to lightning and trying to learn few things.
Problem is that I am able to display the picklist for objects as well as a multi select picklist. But when I click on an object I am getting the related fields in my console.log(resoponseValue) but not in the UI of my aura app when I run the code. Please help me acheiving this task. Here is my code for the same :

Apex Controller:
public class PickList {
@AuraEnabled
public static List <String> getPiklistValues(String objName) {
System.debug('objName--'+objName);
List<String>apiNames = new list<String>();

Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
Map<String, Schema.SObjectField> fieldMap=new Map<String, Schema.SObjectField>();
if(objName.contains('Account')){
fieldMap= schemaMap.get('Account').getDescribe().fields.getMap();
}else if(objName.contains('Case')){
fieldMap= schemaMap.get('Case').getDescribe().fields.getMap();
}else if(objName.contains('Contact')){
fieldMap= schemaMap.get('Contact').getDescribe().fields.getMap();
}else if(objName.contains('Opportunity')){
fieldMap= schemaMap.get('Opportunity').getDescribe().fields.getMap();
}

for(String fieldName : fieldMap.keyset() )
{
system.debug('@@@@@@@'+fieldName);
apiNames.add(fieldName);
}
return apiNames;
}
}

Cmp :
<aura:component controller="PickList" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride" access="global" >
<aura:attribute name="options" type="List" default="Select Object, Account, Case, Contact, Opportunity"/>
<aura:attribute name="selectedValue" type="String" />
<aura:attribute name="FieldsList" type="List" />
<aura:attribute name="SelectedFieldsList" type="List" />



<select style="border: 1px solid #A9A29E;" class="slds-select" id="objectName" onchange="{!c.myAction}">
<aura:iteration items="{!v.options}" var="abc">
<option value="{!abc}" text="{!abc}" />
</aura:iteration>
</select>

<div class="slds-m-around_xx-large">
<lightning:dualListbox aura:id="selectFields"
name="Fields"
label="Select Fields"
sourceLabel="Available Fields"
selectedLabel="Selected Fields"
options="{!v.FieldsList }"
value="{!v.SelectedFieldsList}"
onchange="{!c.handleSubmitChange}"/>
<lightning:button variant="brand" label="Submit" onclick="{!c.getSelectedFields}" />
</div>
</aura:component/>

Controller JS :
({
myAction : function(component, event, helper) {
var action = component.get('c.getPiklistValues');
var t=document.getElementById("objectName").value;
alert('object--'+t);
action.setParams({
objName : t,
});
action.setCallback(this,function(response){
var responseValue = response.getReturnValue();
console.log(responseValue);
component.set("v.FieldsList",responseValue);
});
$A.enqueueAction(action);
},
handleSubmitChange: function (component, event, helper) {
//alert('ok');
var e = event.getParam("value");
component.set("v.SelectedFieldsList", e);
},
getSelectedFields : function(component, event, helper){
// alert('fine');
var s = component.get("v.SelectedFieldsList");
console.log('$$$$' , s);
}
})

Thanks in advance.