Ccc | Salesforce Trailblazer Community

11 août 2021, 20:15

Add Styles and Data to a Lightning Web Component - Challenge not yet complete in Quick Start: Lightning Web Components We can't find the '{name}' attribute in the selector.html file.

Hi! I'm working on this module and I keep getting this challenge error:

Challenge not yet complete in Quick Start: Lightning Web Components

We can't find the '{name}' attribute in the selector.html file.

BUT - I did add the name attribute to the selector.html file, as shown. Please help.

<template> <div class="wrapper"> <header class="header">Available Bikes for {name}</header> <section class="content"> <div class="columns"> <main class="main" > <c-list onproductselected={handleProductSelected}></c-list> </main> <aside class="sidebar-second"> <c-detail product-id={selectedProductId}></c-detail> </aside> </div> </section> </div> </template>

11 réponses

Keiji Otsubo
12 août 2021, 06:41
Hi Monica,

It is written as follows. Can you confirm that it was deployed?

When you deploy the selector component files to your org (make sure that your deployment includes the selector files), you should see the following with your name instead of Mary Jones. You might need to refresh the page.

Ajouter un commentaire

Rédiger une réponse...

0/9000

2 avr. 2025, 12:28

Unable to embed tableau report using JWT token

1) Hi We are using below method to enable JWT (JSON Web Token) authentication in Tableau 2025

Create a Connected App:

Sign in to Tableau: Log in to Tableau Server or Tableau Cloud as an administrator.
Navigate to Connected Apps: Go to Settings > Connected Apps.
Create a New App: Click "Create a New Connected App".
Choose Trust Type: Select either "Direct Trust" or "OAuth 2.0 Trust" depending on your needs.
- Direct Trust: Requires you to generate a secret and configure the JWT on your external application.

Configure App Details: Provide a name, description, and other relevant information for the connected app.
Generate a Secret (for Direct Trust): If you chose Direct Trust, generate a secret key for the connected app.
Note Client ID and Secret: Make a note of the Client ID and the secret key (if applicable) as you'll need them to generate the JWT

2) We are using below python code to generate the JWT token

import jwt

import datetime

import uuid

username = "Username to login the tableau report sever"

client_id = "connected_app_client_id"

secret_id = "connected_app_secret_id"

secret_value = "connected_app_secret_value"

token = jwt.encode(

{

"iss": client_id,

"exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=5),

"jti": str(uuid.uuid4()),

"aud": "tableau",

"sub": username,

"scp": ["tableau:views:embed", "tableau:metrics:embed"]

secret_value,

algorithm = "HS256",

headers = {

'kid': secret_id,

'iss': client_id

}

)

print(token)

3) We code embed the token in the URL and run thr HTML file.

<!DOCTYPE html>

<head>

<title>Embed Tableau Report</title>

<style>

⌗tableauViz {{

width: 100%;

height: 800px; /* Adjust height as needed */

}}

</style>

</head>

<body>

const tableauServerUrl = "https://ebixdt10";

const reportPath = "/views/HoldingsReport/ConsolidatedHoldingReport"

const jwtToken = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE"; // JWT token generated from Python code

function initTableau() {{

const containerDiv = document.getElementById("tableauViz");

const url = tableauServerUrl + reportPath + "&jwt=" + encodeURIComponent(jwtToken);

const options = {{

hideTabs: false,

onFirstInteractive: function () {{

console.log("Tableau report is ready.");

}}

}};

const viz = new tableau.Viz(containerDiv, url, options);

}}

initTableau();

</script>

</body>

</html>

We are facing this issue while executing the html file we are still getting the tableau report server login page.

What could be the and what steps we are missing.

3 réponses

3 avr. 2025, 13:38

@Sameer Patil

Hi, again you are mixing api v2 with api v3 way to initialize the viz.

Please take a look of the code I have built and tested using api v3 and that I have posted in my previous answer:

<!DOCTYPE html>
 <html lang="en">
  <head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Embed Tableau Report</title>
	  <style>
	       ⌗tableauViz {{
	         width: 100%;
	         height: 800px; /* Adjust height as needed */
	       }}
	  </style>
  </head>
  <body>
	<div id="tableauViz"></div>
	<script type="module">
	  import {
		TableauViz
		} from 'https://ebixdt10/javascripts/api/tableau.embedding.3.latest.min.js';
	  const tableauServerUrl = "https://ebixdt10";
	  const reportPath = "/views/HoldingsReport/ConsolidatedHoldingReport" 
	  function initTableau(){
		const viz = new TableauViz();
		viz.src = tableauServerUrl + reportPath ;
		viz.token = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE";
		viz.toolbar = 'hidden';
		document.getElementById('tableauViz').appendChild(viz);
	  }
	  initTableau();
	</script>
   </body>
</html>

So, a few markups for v3

a. There is no such function tableau.Viz(vizDiv, options.url, options). Instead there is a TableauViz object.

b. Thus, there is no need to create options (

const options = {

url: url + '?token=' + token,

width: '1484px',

height: '655px',

toolbar: 'bottom'

};

The options are managed through the properties of the TableauViz object:

https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html

		const viz = new TableauViz();
		viz.src = tableauServerUrl + reportPath ;
		viz.token = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE";
		viz.toolbar = 'hidden';

c. The token is not used in the URL of the src of the Tableau Viz, instead it is one property of the TableauViz object.

So, take a look of the html page I attached in this answer, and in the previous one, please.

If this post resolves the question, would you be so kind to "Select as Best"?. This will help other users find the same answer/resolution and help community keep track of answered questions. Thank you.

Regards,

Diego Martinez

Tableau Visionary and Forums Ambassador

Ajouter un commentaire

Rédiger une réponse...

0/9000

15 juil. 2024, 12:18

How to send data extension as a .csv to my email address daily?

Please help me with sending my data extension results as .CSV to my email address in SFMC. Please send a step by step guide as I've tried mutiple approaches and nothing seems to be working.

2 réponses

Deepak Chander (Deloitte)
6 août 2024, 18:55
Did you get any working approach for this.

Ajouter un commentaire

Rédiger une réponse...

0/9000

8 févr. 2024, 17:32

Has anyone successfully used the built-in classes "fluid" and/or "fluid-centered" in a text box?

If so, where are they applied? I'm stumped. Please show code if you can. #css

Thank you!

Nan

1 réponse

Kritika Singh (RCG Digital)
8 févr. 2024, 18:03
Hi,@Nan Kreitner
fluid creates a text box that spans the full width of its container.
fluid-centered creates a text box that is centered horizontally within its container and takes up 80% of the container's width .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}

.fluid-centered {
width: 80% !important;
}
</style>
<title>Fluid and Fluid-Centered Example</title>
</head>
<body>
<div class="fluid">
<p>This is a fluid text box that takes up the full width of its container.</p>
</div>

<div class="fluid-centered">
<p>This is a centered fluid text box that takes up 80% of its container's width.</p>
</div>
</body>
</html>

Thanks.

Ajouter un commentaire

Rédiger une réponse...

0/9000

8 janv. 2019, 16:43

Capabilities to photo edit pictures to general comment section (Rich Text Area field).

Is there any way to allow photo edit on the pictures uploaded to the general comment section - Rich Text Area field.

6 réponses

Chris Stegall (Creme de la CRM)
9 janv. 2019, 16:17
Unfortunately, that's not possible right now. Sorry.

But! You can mark this question "answered" and then add the functionality you'd like to the IdeaExchange (https://success.salesforce.com/ideaSearch). <---- Click that link (https://success.salesforce.com/ideaSearch), click the blue "post an idea" button on the right, and then type what you'd like to see in Salesforce. People will vote on it and Salesforce can add it to a future release if it gets enough support.

Also, after you've done that if you come back here and post a link to your idea post, people searching for this and seeing it answered will be able to pop over and vote for your idea!

Hope that helps!

Ajouter un commentaire

Rédiger une réponse...

0/9000

23 août 2022, 23:03

How can I fix "We can't find the '{name}' attribute in the selector.html file"

How can I fix

5 réponses

pradyumna acharya (sharnabasava unversitey)
10 nov. 2023, 11:35
hi @Sinziana Dobos you can solve this error by following steps first go to manage playground delete all the playground expect the one one you are using for this challenge in your case its (MY TRAILHEAD PLAYGROUND 1) then go to vs code then again author org then deploy in default org then come back to challenge page, click on 3 dots present side of the playground you will see the another playground expect the one your using select that and connect the org then verify the challenge .

Ajouter un commentaire

Rédiger une réponse...

0/9000

15 juin 2022, 19:21

Add Styles and Data to a Lightning Web Componentss

Issue : We can't find the '{name}' attribute in the selector.html file

link:

https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/add-styles-and-data-to-a-lightning-web-component

deployed all files but still getting error

7 réponses

ANIL KUMAR (NA)
10 oct. 2023, 13:31
@Harsh Singh
Please replace these code
Selector.html

<template>
<div class="wrapper">
<header class="header">Available Bikes for {name}</header>
<section class="content">
<div class="columns">
<main class="main" >
<c-list onproductselected={handleProductSelected}></c-list>
</main>
<aside class="sidebar-second">
<c-detail product-id={selectedProductId}></c-detail>
</aside>
</div>
</section>
</div>
</template>

selector.css

body {
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.header, .footer{
height: 50px;
background: rgb(255, 255, 255);
color: rgb(46, 46, 46);
font-size: x-large;
padding: 10px;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
}
.sidebar-first{
width: 20%;
background: #ccc;
order: 1;
}
.sidebar-second{
width: 30%;
order: 3;
background: #ddd;
}

selector.js-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>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Ajouter un commentaire

Rédiger une réponse...

0/9000

15 mars 2022, 10:56

How to overcome from this issue. We can't find the '{name}' attribute in the selector.html file.

#Trailhead

2 réponses

ANIL KUMAR (NA)
10 oct. 2023, 13:33
Selector.html

<template>
<div class="wrapper">
<header class="header">Available Bikes for {name}</header>
<section class="content">
<div class="columns">
<main class="main" >
<c-list onproductselected={handleProductSelected}></c-list>
</main>
<aside class="sidebar-second">
<c-detail product-id={selectedProductId}></c-detail>
</aside>
</div>
</section>
</div>
</template>

selector.css

body {
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.header, .footer{
height: 50px;
background: rgb(255, 255, 255);
color: rgb(46, 46, 46);
font-size: x-large;
padding: 10px;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
}
.sidebar-first{
width: 20%;
background: #ccc;
order: 1;
}
.sidebar-second{
width: 30%;
order: 3;
background: #ddd;
}

selector.js-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>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Ajouter un commentaire

Rédiger une réponse...

0/9000

18 févr. 2020, 21:30

Hello again!

Are Actions down for Community Users? Works when I am logged into EA. But when I login as a Community User and am in Embedded Dashboards, Action doesn't work. It works when you open the dashboard in Analytics Studio from the community. It gives the following error.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <center> <table bgcolor="white" style="align: center;"> <tbody> <tr><td><br><br></td></tr> <tr> <td> <table bgcolor="white" cellpadding="0" cellspacing="0" style="border:1px solid #ccc;" width="758"> <tbody> <tr><td><br></td></tr> <tr> <td> <div style="background-color: white; border: 1px solid #ccc; padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-left: 10px; margin-right: 10px;"> <table bgcolor="white" cellpadding="0" cellspacing="0" width="758"> <tbody> <tr> <td><img src="/img/sites/clock.png" alt="clock"></td> <td><img src="/img/sites/warning.png" alt="warning"></td> <td><span style="font-family: Verdana; font-size: medium; font-weight: bold;">We are down for maintenance.</span><br><br>Sorry for the inconvenience. We'll be back shortly.</td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td> <span> <table border="0" cellpadding="0" cellspacing="0" style="text-align: right;" width="100%"> <tbody> <tr> <td> <span> <span style="font-family: Verdana; font-size: smaller">Powered by</span> <img src="/img/sites/poweredby.png" alt="powered by" style="vertical-align: middle; margin:12px 8px 8px 0"> </span> </td> </tr> </tbody> </table> </span> </td> </tr> </tbody> </table> </td> </tr> <tr><td><br></td></tr> <tr><td></td></tr> <tr><td><br></td></tr> </tbody> </table> </center>  </body> </html>

Best,

Sayantani

2 commentaires

Sayantani Mitra (Conservice LLC.)
18 févr. 2020, 22:18
I found part of the problem:
If you have a community that has another part after the main url, it fails to take that part.
So, instead of hello.website/my/<salesforce id>, the url now shows hello.website/<salesforce id>

Ajouter un commentaire

Rédiger un commentaire...

0/9000

8 nov. 2017, 15:27

Looking to change the font size in a form field so it looks bigger when using a tablet in kiosk mode.

the Knowledge Base advice at

http://help.pardot.com/customer/en/portal/articles/2125998-changing-the-size-of-form-text-and-text-area-input-field-areas?b_id=11139

is not working. Please see MS Word doc of HTML in template

This is not my HTML, I cloned it from a colleague's template so please forgive me if the HTML is not as "elegant" as it should be.

Any ideas?

How do I make the text in a Pardot form field bigger.docx

5 commentaires

Lara Black (PardotPro)
8 nov. 2017, 17:39
So your LABEL has a font size of 24. It is declared separately.
Your input text has nothing special declared, which means it 'inherits' the master value.
Which is this:
body {
font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 300;
font-family: "Trebuchet MS", verdana, geneva, lucidia, arial, sans-serif;
color: #333; }
So you need to add some font-size (etc) declarations to the 'input' version.

Ajouter un commentaire

Rédiger un commentaire...

0/9000

#Ccc0 personne en discute

Formation associée

Classement pour n° Ccc

Pas de leaders actifs.