How to create your own Custom Processing Setting screen

IPF Custom Processing Settings service (referred to as CPS henceforth in the documentation) provides a way for IPF client implementations to create and maintain custom dynamic configurations. This document will help walk you through how to manage those settings within a client implemented IPF Operational Dashboard.

When to use this

You should use this document when you have a Custom Processing Setting setup, and you have users that want to be able to edit or view them in the client implemented IPF Operational Dashboard.

Dependencies

Configure your Custom Processing Settings Service

In your config file, configure the host and port of your service like so:

ipf.dps-api {
  client-type = "connector"
  cps {
    http {
      client {
        host = "your-custom-processing-settings-app"
        port = 8080
      }
    }
  }
}

Create your own Custom Processing Setting View

Create your Angular Component

nx g @nx/angular:component apps/my-app/src/lib/custom-processing-settings

Create a route for your CPS view

The ProcessingEntityGuard must be included in the route configuration or the service will not correctly pass the active Processing Entity. 
export const appRoutes: Route[] = [
    {
        path: 'app/:processingEntityId/custom-processing-settings',
        canActivate: [ProcessingEntityGuard],
        loadComponent: () => CustomProcessingSettingsHomeComponent
    }
];

Load your Custom Processing Setting from the Custom Processing Service.

Once you have created your component and added it to your application via a route you can then request the CPS from the CustomProcessingSettingsService service.

The CustomProcessingSettingsService will automatically apply your selected Processing Entity to the request in front of your settingName to call the CustomProcessingSettingsService with the uniqueAgentId. 
constructor(
  private readonly customProcessingSettingsService: CustomProcessingSettingsService
) {}

ngOnInit(): void {
  this.customProcessingSettingsService.getSetting('FEATURE_NAME').subscribe({
    next: (res: CustomProcessingSettings) => {
      this.settingValue = res?.payload?.settingValue?.value;
    },
    error: (err) => {
      if (err.status === 404) {
        this.settingValue = false; // Default value
      }
    }
  });
}

Submit a users change request to the Custom Processing Service

Once the user has made some changes to the setting you can submit the setting back to the CustomProcessingSettingsService to create a change request.

The CustomProcessingSettingsService will make sure the correct Processing Entity and user information is added to the request. 
createChangeRequest(): void {
  const changeRequest = {
    payload: {
      settingCategory: 'boolean',
      settingName: 'FEATURE_FLAG',
      settingFormat: 'BOOLEAN',
      settingValue: { value: true }
    }
  };

  this.customProcessingSettingsService.saveSetting(changeRequest).subscribe({
    next: (res) => {
      // Navigate to approval page
      this.router.navigate(['/processing-settings/approve']);
    }
  });
}

By default, a "Custom Processing Settings" menu item appears in the "Processing Settings" drop down in the top navigation if the user has the correct permissions set up, by default, it will link to "app/{active_processing_entity}/custom-processing-settings". You can customize this route by updating the injection token below.

This will append to the end of the application’s default route, so the path string needs to be prefixed with "/". 
export const appConfig: ApplicationConfig = {
    providers: [
        ...
        {
            provide: CUSTOM_PROCESSING_SETTINGS_ROUTE,
            useValue: '/path-to-your-view'
        }
        ...

The above example will mean your Custom Processing Setting screen route is "app/{active_processing_entity}/path-to-your-view".