Sign Up ›
  • James Keogh
  • NEWBIE
  • 0 Points
  • Member since 2019
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 3
    Questions
  • 1
    Replies
1 replies

trying to use JS in lightning:container

Hi All,

I am trying to create a twitter feed component for use in Salesforce communities and because I need to use the JS supplied by Twitter I am using a Lightning:container, however I cannon't seem to get the JS to load for me and I have been trying for days.

I have created an index.html file and zipped that up with the "widgets.js" file supplied by Twitter and saved it to the static resources in a file called spptest. I have also whitelisted twitter in the community CSP. Please see my code below and If you can spot any issues with it please let me know.

Thanks, James

HTML 
<!DOCTYPE html>
    <html>
    <body>
    <a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
    </body>
    </html>

CMP 
<aura:component implements="forceCommunity:availableForAllPageTypes, flexipage:availableForAllPageTypes" access="global">
        <lightning:container src="{!$Resource.spptest + 'index.html'}"/>
        <aura:attribute name="TwitterHandle" type="String" />

    </aura:component>

Design 
<design:component label="Twitter Feed 2.0">
        <design:attribute name="TwitterHandle" label="Twitter Handle" description="Please insert the Twitter handle you would like to display" />
        <design:supportedFormFactors>
            <design:supportedFormFactor type="Large"/>
            <design:supportedFormFactor type="Small"/>
        </design:supportedFormFactors>
    </design:component>

This is the result I get when the component is in the community:
User-added image
1 replies

Twitter feed as an LWC

Hi All,

I am trying to create a Lightning Web Component for a salesforce community in Visual Studio but I believe that there is an issue with my JS somewhere that is causing it to fail.

I also plan on having an input parameter in the compontent and use a key/value pairing to replace the placeholder account for the twitter feed based upon the user defined input, but that is not currently fully configured.

JS 
import { LightningElement, api, } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import Twitterjs from '@salesforce/resourceUrl/Twitterjs';

export default class Twitter extends LightningElement {

    Twitterjs = false;

    renderedCallback() {
        if (this.Twitterjs) {
            return;
        }
        this.Twitterjs = true;

        Promise.all([
            loadScript(this, Twitter + 'twitter.js'): Promise
        ])
            .then(() => {
                this.Twitterjs();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading Twitter',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }
@api twitterhandle
}
HTML 
<template>
    <lightning-input-field field-name="twitterhandle"></lightning-input-field>
    <a class="Twitter" lwc:dom="manual" data-height="500" data-theme="light" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw" data-chrome="nofooter noborders">Tweets by TwitterDev</a>
</template>

META.XML 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Twitter feed</masterLabel>
    <description>This module allows you to embed a twitter feed in your community</description>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfig targets="lightningCommunity__Page">
        <property name="backgroundColor" type="Color" default="rgba(0, 255, 255, 0)">
        <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
    </targetConfig>
    <targetConfig targets="lightningCommunity__Default">
        <property name="backgroundColor" type="Color" default="rgba(0, 255, 255, 0)">
        <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
    </targetConfig>
</LightningComponentBundle>

It would be great if anyone could point out any glaring errors as I have been troubleshooting this for a number of hours now without any success.

Thanks,
​​​​​​​James
3 replies

Change VF page controller in managed package

Hey Guys,

I am trying to modify the CSS in a managed package that is saved as a visual force page, it is controlled by a custom controller that is hidden to me. 

I have cloned the VF page and changed the CSS code I need to, so how do I now point to this new VF page instead of the old one in the managed package. 

Thanks,
James
15 replies

LWC > Load Script > Static Resource JS File > Not Working

Hi Folks,

I am building a LWC to load external JS script file in LWC. However whenever loadScript function is executing it is failing to load and there is not error received.

LWC 
import { LightningElement, track  } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import BrandfolderJS from '@salesforce/resourceUrl/BrandfolderJS';

export default class brandFolderLink extends LightningElement {
	
    @track blnBrandfolderJSInitialized = false;
    
    renderedCallback() {

        if (this.blnBrandfolderJSInitialized) {
            return;
        }
        this.blnBrandfolderJSInitialized = true;

        loadScript(this, BrandfolderJS)
        .then(() => {
            alert('success.......');
        })
        .catch(error => {
            alert('failed.....'+error);
        });
    }
	
}

JS file from Static Resource - Brandfolder JS (https://cdn.brandfolder.com/bf.min.js)
I have created JS file as static resource (BrandfolderJS) and using it in LWC.

LWC is added to App Builder Page/Home Page and trying to load, however it is going to catch block in loadScript method without any error. Error variable is undefined.

Can you please help?

Thank you,
Jigar Lakhani