+
+ ```
+
+ - `src/app/recommendations-component/recommendations-component.component.ts`
+ In this file we will add the logic for our component. Add the following code to the `report-problem.component.ts` file:
+ ```typescript
+ import { Component } from '@angular/core';
+
+ @Component({
+ selector: 'app-report-problem',
+ templateUrl: './report-problem.component.html',
+ styleUrls: ['./report-problem.component.scss']
+ })
+ export class ReportProblemComponent {
+ reportProblem() {
+ // Logic to report a problem
+ console.log('Problem reported!');
+ }
+ }
+ ```
+ - `src/app/recommendations-component/recommendations-component.component.scss`
+ We can use this file to add styles to our component. Add the following code to the `report-problem.component.scss` file:
+ ```scss
+ .report-problem {
+ background-color: #f8f9fa;
+ padding: 20px;
+ border-radius: 5px;
+ h2 {
+ color: #343a40;
+ }
+ button {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ &:hover {
+ background-color: #0056b3;
+ }
+ }
+ }
+ ```
+ - `report-problem.component.spec.ts` (optional)
+ This file is automatically generated and contains the test cases for your component. You can modify it to add your own test cases.
+
+Most elements in the NDE view are intended to be customizable. However, if you encounter an element that does not support customization, please open a support case with ExLibris.
+This helps ensure that we can address the issue and potentially add customization support for that element in future updates.
### Accessing host component instance
-You can get the instance of the component your custom component is hooked to by adding this property to your component class:
+You can get the instance of the component your custom component is hooked to by adding this property to your component class.
+You might need this when you want to access the properties or methods of the host component.
+For example if you want to access the `record` object in the `nde-record-availability` component.
```angular2html
@Input() private hostComponent!: any;
@@ -138,183 +227,229 @@ You can get the instance of the component your custom component is hooked to by
### Accessing app state
-- You can gain access to the app state which is stored on an NGRX store by injecting the Store service to your component:
-
-```angular2html
-private store = inject(Store);
-```
+You can gain access to the app state which is stored on an NGRX store by injecting the Store service to your component.
+You might need this when you want to access the app state or dispatch actions to the store.
-- Create selectors. For example:
+For example if you want to access the `isLoggedIn` property in the `user` feature of Primo.
```angular2html
-const selectUserFeature = createFeatureSelector<{isLoggedIn: boolean}>('user');
-const selectIsLoggedIn = createSelector(selectUserFeature, state => state.isLoggedIn);
+private store = inject(Store);
```
-
+- Create selectors. For example:
+ ```angular2html
+ const selectUserFeature = createFeatureSelector<{isLoggedIn: boolean}>('user');
+ const selectIsLoggedIn = createSelector(selectUserFeature, state => state.isLoggedIn);
+ ```
- Apply selector to the store to get state as Signal:
+ ```angular2html
+ isLoggedIn = this.store.selectSignal(selectIsLoggedIn);
+ ```
+- Or as Observable:
+ ```angular2html
+ isLoggedIn$ = this.store.select(selectIsLoggedIn);
+ ```
-```angular2html
-isLoggedIn = this.store.selectSignal(selectIsLoggedIn);
-```
-
-Or as Observable:
-
-```angular2html
-isLoggedIn$ = this.store.select(selectIsLoggedIn);
-```
-
-### Translating from code tables
+### Translating from code tables
You can translate codes in your custom component by using ngx-translate (https://github.com/ngx-translate/core).
+Useful if you want to display a translated label in your component.
-- If you are using a stand alone component you will need to add the TranslateModule to your component imports list.
+- If you are using a standalone component you will need to add the TranslateModule to your component imports list.
- In your components HTML you can translate a label like so:
-```angular2html
-This is some translated code: {{'delivery.code.ext_not_restricted' | translate}}
-```
-
-
----
+ ```angular2html
+ This is some translated code: {{ 'delivery.code.ext_not_restricted' | translate }}
+ ```
## Creating your own color theme
-The NDE theming is based on Angular Material.
-We allow via the view configuration to choose between a number of pre built themes.
-
-
+The NDE UI supports theming, allowing you to customize the look and feel of the interface to match your institution's branding or design preferences.
+Since NDE theming is based on Angular Material, you can leverage Material's theming capabilities to create a cohesive and visually appealing user experience.
+We allow via the view configuration to choose between a number of pre-built themes.
+The themes developed by ExLibris have been tested for usability and accessibility, ensuring that they meet the needs of a diverse user base.
+If you require to create your own theme instead of using one of our options follow these steps:
-If you want to create your own theme instead of using one of our options follow these steps:
-
-1. Create a material 3 theme by running:
- ```bash
- ng generate @angular/material:m3-theme
- ```
- You will be prompted to answer a number of questions like so:
- ```
-? What HEX color should be used to generate the M3 theme? It will represent your primary color palette. (ex. #ffffff) #1eba18
-? What HEX color should be used represent the secondary color palette? (Leave blank to use generated colors from Material)
-? What HEX color should be used represent the tertiary color palette? (Leave blank to use generated colors from Material)
-? What HEX color should be used represent the neutral color palette? (Leave blank to use generated colors from Material)
-? What is the directory you want to place the generated theme file in? (Enter the relative path such as 'src/app/styles/' or leave blank to generate at your project root) src/app/styles/
-? Do you want to use system-level variables in the theme? System-level variables make dynamic theming easier through CSS custom properties, but increase the bundle size. yes
-? Choose light, dark, or both to generate the corresponding themes light
-
+While in the `customModule` directory, run the following command in a terminal to generate a new theme:
+```bash
+ng generate @angular/material:m3-theme
```
-- Note that it is imporant to answer yes when asked if you want to use system-level variables.
-
-- Also note that I'm only entering the primary color and not secondary or tertiary. They will be selected automatically based on my primary color.
-
-Once this script completes successfully you will recieve this message:
-
-`CREATE src/app/styles/m3-theme.scss (2710 bytes)`
+You will be prompted to answer a number of questions like so:
+
+- `? What HEX color should be used to generate the M3 theme?`
+ It will represent your primary color palette. (ex. #ffffff)
+- `? What HEX color should be used represent the secondary color palette?`
+ Leave blank to use generated colors from Material
+- `? What HEX color should be used represent the tertiary color palette?`
+ Leave blank to use generated colors from Material
+- `? What HEX color should be used represent the neutral color palette?`
+ Leave blank to use generated colors from Material
+- `? What is the directory you want to place the generated theme file in?`
+ Enter the relative path such as 'src/app/styles/' or leave blank to generate at your project root. For NDE themes, use `src/app/styles/`
+- `? Do you want to use system-level variables in the theme?`
+ System-level variables make dynamic theming easier through CSS custom properties, but increase the bundle size. For NDE themes, choose `yes`
+- `? Choose light, dark, or both to generate the corresponding themes`
+ For NDE themes, choose `light`
+
+> It is important to answer `yes` when asked if you want to use system-level variables.
+> It is advisable only to enter the primary color and not secondary or tertiary. They will be selected automatically based on my primary color.
+
+Once this script completes successfully you will receive this message:
+
+`CREATE src/app/styles/m3-theme.scss (**** bytes)`
To apply the theme go to `_customized-theme.scss` and uncomment the following lines:
+
```
.custom-nde-theme{
@include mat.all-component-colors(m3-theme.$light-theme);
@include mat.system-level-colors(m3-theme.$light-theme);
}
```
----
-
+This will apply the theme to the NDE UI.
-## Developing an Add-On for the NDE UI
+## Developing an add-on for the NDE UI
-The NDE UI supports loading of custom modules at runtime and also provides infrastructure to dynamically load add-ons developed by vendors, consortia, or community members. This enables seamless integration, allowing institutions to configure and deploy external add-ons through **Add-On Configuration in Alma**.
+The NDE UI supports loading of custom modules at runtime and also provides infrastructure to dynamically load add-ons developed by vendors, consortia, or community members.
+This enables seamless integration, allowing institutions to configure and deploy external add-ons through **Add-On Configuration** in Alma, in the `Configuration -> Discovery -> Other -> Add-on Configuration ` section.
The NDE UI add-on framework allows various stakeholders to develop and integrate custom functionality:
- **Vendors** can create and host services that institutions can seamlessly incorporate into their environment.
- **Institutions and consortia** can develop and share custom components, enabling consistency and collaboration across multiple libraries.
-Library staff can easily add, configure, and manage these add-ons through Alma, following guidelines provided by the stakeholders. These typically include:
+Furthermore, library staff can easily add, configure, and manage these add-ons through Alma, following guidelines provided by the stakeholders.
+The Add-on configuration fields show in Alma are:
- **Add-on Name** – The identifier used in Alma’s configuration.
- **Add-on URL** – The location where the add-on is hosted (static folder to load the add-on at runtime).
- **Configuration Parameters** – JSON-based config parameters to be referenced at runtime by the add-on.
-
-
----
-
-## Guidelines for Developing an Add-On
+### Guidelines for developing an add-on
You can download the custom module and modify it to function as an add-on.
-### Set Add-on Name
+#### Set add-on name
-This section below should remain the same.
+The `build-settings.env` file allows you to configure additional options to tailor the build output and behavior of the custom module.
+`ADDON_NAME` - This option allows renaming the internal bootstrap and output files to distinguish different add-on modules.
-
+Example: `ADDON_NAME=customModule`
-
+When set:
+
+- `bootstrap.ts` will be renamed to `bootstrapcustomModule.ts`
+- `main.ts` dynamically loads `bootstrapcustomModule.ts
+- Webpack exposes:
+ ```
+ exposes: {
+ './customModule': '/.src/bootstrapcustomModule.ts',
+ }
+ ```
----
+Use this to create multiple federated modules or differentiate builds for different consumers.
The add-on infrastructure provides a way to access institution-specific configuration parameters. Institutions can upload their configuration settings in JSON format, which your add-on can reference dynamically within its components.
-### 🔧 Accessing Add-On Configuration Parameters
+### Accessing add-on configuration parameters
+In some cases you may want to access the configuration parameters defined in Alma. For example, a configuration parameter may contain a URL or an API key that your add-on needs to function properly.
To access the module parameters from your configuration file, inject the `LookupService` in your component and use `getModuleParam()`:
```ts
-constructor(private lookupService: LookupService) {}
-
-ngOnInit() {
+constructor(private lookupService: LookupService){
+}
+ngOnInit()
+{
const paramValue = this.lookupService.getModuleParam('yourParamKey');
}
```
-> 📘 `yourParamKey` should match the keys defined in your Alma Add-on JSON configuration.
-
----
+>`yourParamKey` should match the keys defined in your Alma add-on JSON configuration.
-If your add-on includes assets such as images, you can ensure a complete separation between the frontend code and asset deployment. To achieve this, set `ASSET_BASE_URL` to point to your designated static folder, allowing your add-on to reference assets independently of the core application.
-
-
+If your add-on includes assets such as images, you can also ensure a complete separation between the frontend code and asset deployment.
+To achieve this, set `ASSET_BASE_URL` in your environment variables to point to your designated static folder, allowing your add-on to reference assets independently of the core application.
+`ASSET_BASE_URL` defines the base URL for assets used in the add-on. This allows you to host your assets separately from the main application, providing flexibility in asset management.
The `autoAssetSrc` directive automatically prepends `ASSET_BASE_URL` to your `[src]` attribute.
-### Example:
+For example:
+
```html
-Report a Problem
+ +
+
```
-### Supported Elements:
+The supported HTML elements for `autoAssetSrc` are:
+
- `