UntypedItemComponent is not themeable

[tantz001]

The themed UntypedItemComponent (https://github.com/DSpace/dspace-angular/commit/3a483c393ddeeb94c90113bbd36320bf8abb3800) in 7.4 does not override the component in src/app.

[tdonohue]

@alexandrevryghem and @artlowel : Just pinging you on this bug as it appears to be related to #1674. It looks like the UntypedItemComponent was added to the custom theme in that PR... but it doesn't actually work when you attempt to theme it.

I've pulled this over to the 7.5 board in case anyone is interested in claiming this.

[mwoodiupui]

That is odd, because I've been using a thoroughly customized copy of UntypedItemComponent in our own theme for some time now.

[tantz001]

Mark, True, and same here. I did the same in 7.2 and 7.3. (by copying the component from the src directory into my theme, and following the instructions in the UI Customization guide). The problem is when you try to add a second themed component in a different theme. Angular only seems to recognize one of them... Have you attempted a second theme?

In this case (in v7.4) UntypedItemComponent is included in the custom theme as a themeable component, and should be ready to use out-of-the-box so to speak... ~~Bill

On Fri, Oct 14, 2022 at 6:40 AM Mark H. Wood @.***> wrote:

That is odd, because I've been using a thoroughly customized copy of UntypedItemComponent in our own theme for some time now.

— Reply to this email directly, view it on GitHub https://github.com/DSpace/dspace-angular/issues/1897#issuecomment-1278891266, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACNKCONBOXDUJPRVSWAHRBLWDFBCFANCNFSM6AAAAAARDPNQZU . You are receiving this because you authored the thread.Message ID: @.***>

-- Human wheels spin round and round While the clock keeps the pace... -- John Mellencamp

---

Bill Tantzen University of Minnesota Libraries 612-626-9949 (U of M) 612-325-1777 (cell)

[alexandrevryghem]

@tantz001 The problem is that the eager components from the custom theme aren't imported by default (for faster first rendering). If you want to use the custom theme and make modifications inside it you should uncomment this line and it's import statement and then it will work.

[tdonohue]

@tantz001 : I've confirmed (based on the tip from @alexandrevryghem ) that the UntypedItemComponent is themable in 7.4.

Here's the steps I used to get this to work:

1. Add/copy content to src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.html (this is the location of the themed HTML for the "custom" theme)
2. Enable that HTML file in src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts by changing the templateUrl to point at the local HTML, i.e. uncommenting this line: https://github.com/DSpace/dspace-angular/blob/main/src/themes/custom/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts#L20
3. Update the eager-themes.module.ts to enable the CustomEagerThemeModule. This is very important as it allows the modules in the custom theme to be loaded eagerly by default. (NOTE: If you are not using the "dspace" theme you can comment out the DSpaceEagerThemeModule in that same file).
4. Finally, enable the custom theme in your config.*.yml:

themes:
  - name: custom

At this point, after rebuilding the UI, I can see the themed version of this untyped-item.component.hml file whenever I visit a normal Item page in DSpace 7.

Closing this ticket as "answered". It already works. It's likely we previously forgot about the changes to eager-themes.module.ts, which are newly required as of 7.3 and above (see docs at https://wiki.lyrasis.org/display/DSDOC7x/User+Interface+Customization#UserInterfaceCustomization-GettingStarted)

[tantz001]

Correct, but:

This only works if you choose to customize the custom theme. This seems like a bad policy, since the next upgrade will overwrite this directory.

My goal is to create and then customize my own themes (based on the custom theme) using the procedures described at https://wiki.lyrasis.org/display/DSDOC7x/User+Interface+Customization

I was able to create custom themed components for everything except the UntypedItemComponent. Finally, I noticed the line in untyped-item.component.ts:

@listableObjectComponent(Item, ViewMode.StandalonePage, Context.Any, 'custom')

note: the name of the theme is hard-coded.

I simply changed 'custom' to the name of my theme, and everything seems to work as expected (in two distinct themes). I'm not sure if this is a code issue or a documentation issue, but this step of adding the theme name to the annotation seems necessary.

My angular experience is limited, and I'm not sure why this works, but it seems to do what was needed...

[mwoodiupui]

There is an example of coding the theme name in the first comment on https://wiki.lyrasis.org/display/DSDOC7x/User+Interface+Customization but it isn't emphasized. You can also find examples in the stock themes.

[tantz001]

Yes, I see that now -- that is really under the radar! It was not even clear to me that it was related to my problem.

[alanorth]

Yes, I just ran into this issue as well. After copying the untyped-item component from the custom theme into my own theme I did the following:

• Added the import { UntypedItemComponent } from ... to my theme's eager-theme.module.ts (see the example in the custom theme)
• Added the UntypedItemComponent to my theme's eager-theme.module.ts entry components and (see the example in the custom theme)
• Changed the fourth parameter of the @listableObjectComponent(... in my theme's untyped-item.component.ts to be my theme's name (see the first comment on the DSpace 7 User Interface Customization page of the wiki)

After that I had a handful of errors like this during build:

error NG8001: 'ds-themed-results-back-button' is not a known element:
1. If 'ds-themed-results-back-button' is an Angular component, then verify that it is part of this module.
2. If 'ds-themed-results-back-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

It turns out I had to find which component was responsible for the ds-themed-results-back-button selector and add it to my eager-theme.module.ts as well. In this case it was the ItemSharedModule component, but there were several others.

Even after that, if your Angular build is successful, but you are not seeing your local theme changes, it might be due to cache! Stop and restart your dev server to be sure. Hopefully this helps someone else!