3

New to SitecoreJSS and Angular.

Using Sitecore 9.0.1 and SitecoreJSS 11.0 (Angular)

Created field - "HeadingBackgroundColor" type Droplist with data source pointing to different folder (I can directly use ColorPicker or Single line text and pass HEX color there. But our client wants the DropDown list) Template filed

Data source folder: enter image description here

On the Item level I choose Green color (from drop down list): enter image description here

In the back end code (angular) I am able to read the Dropdown list data (Which is Green)

.html

<div [ngStyle]="{'background-color': bgColor}">Heading</div>

.ts

ngOnInit() {
this.bgColor = getFieldValue<any>(this.rendering, 'HeadingBackgroundColor');
}

Browser Console: (it's passing item name)

<div style="background-color:Green;">>Heading</div>

Is there way to read the hex color (#969300) instead of passing Item name Green.

Thanks in Advance!

Improve this question
1

2 Answers 2

Reset to default
1

Change data type of "HeadingBackgroundColor" to "DropLink". With this change your layout service will return all fields of the item selected in the DropLink [HeadingBackgroundColor] field.

You might be able to find the color code in the object 
"HeadingBackgroundColor":{"id":"00000000","url":"/Green","fields":{"colorcode":{"value":"#969300"}}}

enter image description here

Improve this answer
6
  • I changed the data type to DropLink and in the HTML it's not reading Droplink data. FYI - I am not using any GraphQL.
    – Sun
    Commented Apr 13, 2020 at 12:17
  • Can you please post your layout service output.? it should respond the items referred in drop link field.
    – Gobinath Saminathan
    Commented Apr 13, 2020 at 13:16
  • could you please tell me how I can review the output without using GraphQL query?
    – Sun
    Commented Apr 13, 2020 at 17:57
  • https://{domain-name}/sitecore/api/layout/render/jss?item=/&sc_apikey={9999-9999-99999-9999999} replace domain name and api key with your domaina name and api key
    – Gobinath Saminathan
    Commented Apr 14, 2020 at 13:39
  • Thank you. "HeadingBackgroundColor2":{"id":"85efb2f5-8ade-4bb2-94b2-fa2063dce3bf","url":"/common-data/background-color-selection/bg-blue","fields":{"BackgroundColorHex":{"value":"#003e5f"}}}}}. I am able to see the values, but how I am going to read the value in (.ts) file ?
    – Sun
    Commented Apr 14, 2020 at 16:52
1

Instead of inline styling, you can use css class attribute.

Now Droplist item names will be the css classes.

.Green{background-color: #969300;}

Inside the div <div class={{bgColor}}>Heading</div>

Improve this answer
1
  • Thank you for you suggestion, I already tried this. But the only draw back on this is - we can't change/add colors dynamically. If we want to add new color it's going to be code change/deployment.
    – Sun
    Commented Apr 13, 2020 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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