1

I'm trying to figure out how to allow my users to set the property of an LWC and have the URL they input be used as the background image of the the div.

I'm trying to set CSSproperties using javascript, but it seems as if the input isn't being recorded.

I was following the method explained here: https://www.youtube.com/watch?v=ENRVbA3bqzY

Any idea where I've gone wrong and how to correct it? Thanks in advance!

HTML:

<template>
    <div class="wrapper">
       <div class="background">
         <div class="logo">
         </div>  
        <div class="scoreboard"> 
          <h2 class="scoreboard_heading">TOTAL GIFTS:</h2>
          <p class="scoreboardp"><strong>{donors}</strong></p>
          <h2 class="scoreboard_heading">TOTAL RAISED:</h2>
          <p class="scoreboardp"><strong>${amount}</strong></p>
        </div>
     </div>
   </div>
</template>

JS:

import { LightningElement, api, track, wire } from 'lwc';
import getCampaigns from '@salesforce/apex/testCampaign.getCampaigns'
import { getRecord,getFieldValue } from 'lightning/uiRecordApi';
import AMOUNTWONOPPORTUNITIES__FIELD from "@salesforce/schema/Campaign.AmountWonOpportunities";
import NUMDONOR__FIELD from "@salesforce/schema/Campaign.NumberOfWonOpportunities";

const fields = [AMOUNTWONOPPORTUNITIES__FIELD,NUMDONOR__FIELD];

export default class DoGheader2 extends LightningElement {
    @api background;
    @api campaignid;
    @wire(getRecord,{recordId: "$campaignid", fields})
    campaign;

    renderedCallback(){
        this.template
            .querySelector(".wrapper")
            .style.setProperty("--background",this.background);}
   
    renderedCallback(){console.log(this.campaign.data);}
    get amount(){
        return getFieldValue(this.campaign.data,AMOUNTWONOPPORTUNITIES__FIELD);}
    get donors(){
        return getFieldValue(this.campaign.data,NUMDONOR__FIELD);}  
}

CSS:


.wrapper{
    --background:https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg;
    background-color: #FFFFFF;
    max-width: 100%;
    min-width: 100%;
    clear: none;
   
  }
  .background{
    
    background-image:URL(var(--background));
    background-size: cover;  
      min-height:50vh;
      width:100%;
      display:flex;
      align-items:center;
  
  }
  .scoreboard{
    margin:auto;
    margin-right: 5%;
    padding:20px;
    min-width:15%;
    background: linear-gradient(#0009, #0009);
    text-align:center;
    float:right;
  
  }
  .scoreboard_heading{
  color:#FFFFFF;
    font-size:;
  }
  .scoreboardp{
    color:#EA6522;
    font-size:2em;
  }
  .logo {
    content:url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
    max-width:15%;
    margin-left: 1%;
    float:left;
  
  }

JS-meta.XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property label="selectedCampaignId" name="campaignid" type="String" datasource="apex://MyCampaigns"/>
        <property name="background" type="String" label="Background Image"/>
    </targetConfig>
</targetConfigs>
</LightningComponentBundle>

1 Answer 1

1

Note that you need url(...) for a URL to work, and that it is case sensitive.

You need to use var by itself:

background-image:var(--background);

Then, you need to include the url(...) bit:

renderedCallback() {
  this.template.querySelector('.wrapper')
   .style.setProperty('--background', `url(${this.background})`);
}
6
  • Thank you for the reply. My JavaScript is shaky at best. I wasn't sure how to escape the url portion. It unfortunately is still not working. I have it print to console to see what the value of this.background is and it seems to indicate it is undefined. Nov 10, 2021 at 17:51
  • 1
    @ThomasGunn I updated the code I used to originally test your question out, and created a repository just for you. This updated version uses a getter/setter design, but is essentially the same as what you're trying to achieve.
    – sfdcfox
    Nov 10, 2021 at 19:29
  • Thank you! This is awesome! My goal has been to allow the user to select a url via a target config. I tried adding this in using the repository you provided and it still can get it to work. Maybe I am missing the step that connects the target config to the actual javascript? Here is a loom recording to show you exactly what I am trying to do. Again, thank you for all your help! Nov 10, 2021 at 20:00
  • 1
    @ThomasGunn I updated the repo. This now works in Experience Builder and App Builder in my org.
    – sfdcfox
    Nov 10, 2021 at 20:24
  • It sure does! awesome thank you! i've been banging my head against this for a while now. I have a couple of question just so I understand whats going on here. why did we add _background over just background. If I have multiple features to add to this would I just repeat these two functions for each? Also what does the question mark in the queryselector mean? Again Thank you! Nov 10, 2021 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.