How to use rendering parameters in shared component using Sitecore JSS

Question

I am using Sitecore 10 with Angular app JSS, I created shared component "Header" like that:

I have a rendering parameters background field, I need to add it in yml files of pages to be different in each page. However, when I added in home page like this:

I got this error. Please note, it was working when it was in header component not in the page.

Here is the header component definition:

Any ideas about how can I read it in pages?

Answer 1

We had similar requirement to distinguish whether page is secured or not. Based on that we are then checking whether user is authenticated or not.

Implementation is using React but I think for Angular it will be similar in your case.

We have added new field of type checkbox "securedRoute" to /sitecore/definitions/route.sitecore.js:

In the route definition / yml of pages, we are setting it to true where needed as you don't need to set it to false which is default value:

And then on layout we are checking whether it is true:

In your case, you will show/hide background...

Answer 2

In order for sitecore to recognize it you have to define it also in your component definition. You should edit the .js definition file located /sitecore/definitions/components/ and you will need to add the params array and mention the expected parameters:

addComponent(manifest, {
  name: "Hello-World",
  displayName: "Hello-World",
  fields: [{ name: "title", type: CommonFieldTypes.SingleLineText }],
  params: ["background"],
})