1. Create a project-specific subclass from the `DocuStoreExplorerPageApi` interface and its implementation.
npm install @smartbit4all/document-explorerDocuStoreExplorerPageApi interface and its implementation.
public interface YourDocuExplorerPageApi extends DocuStoreExplorerPageApi {}
public class YourDocuExplorerPageApiImpl extends DocuStoreExplorerPageApiImpl
implements YourDocuExplorerPageApi{}
`
2. Create a project-specific subclass from the DocuStoreFolderPageApi interface and its implementation.
`
public interface YourDocuFolderPageApi extends DocuStoreFolderPageApi {}
public class YourDocuFolderPageApiImpl extends DocuStoreFolderPageApiImpl
implements YourDocuFolderPageApi {
`
3. Create project-specific view names that you provide in the @ViewApi annotations.
`
@ViewApi(value = YourViewNames.YOUR_DOCU_EXPLORER,
parent = YourViewNames.SOME_PARENT)
public interface MebitDocuExplorerPageApi extends DocuStoreExplorerPageApi {}
@ViewApi(value = YourViewNames.YOUR_DOCU_FOLDER,
parent = YourViewNames.YOUR_DOCU_EXPLORER)
public interface YourDocuFolderPageApi extends DocuStoreFolderPageApi {}
`
4. In your project's UI configuration, use the @Bean annotation to define your derived interfaces and implementations.
`
@Bean
public DocuStoreFolderPageApi folderPageApi() {
return new YourDocuFolderPageApiImpl();
}
@Override
@Bean
public DocuStoreExplorerPageApi docuStoreExplorerPageApi() {
return new YourDocuExplorerPageApiImpl();
}
`
5. Install the @smartbit4all/document-explorer npm package into your Angular project.
@smartbit4all/document-explorer
6. In the Pages.ts file, specify the names of the new pages.
`
export enum Pages {
...
YOUR_DOCU_EXPLORER = 'YourDocuExplorer',
YOUR_DOCU_FOLDER = 'YourDocuFolder',
}
`
7. In the viewHandlers.ts file, assign the URLs corresponding to the view names.
`
export const viewContextHandlers: SmartViewHandlerModel[] = [
...
{
name: Pages.YOUR_DOCU_EXPLORER,
route: 'your/route/for the component',
},
{
name: Pages.YOUR_DOCU_FOLDER,
route: 'your/route/for the component',
},
`
8. Configure the Angular routing according to your needs.
9. In the app.module.ts provide the DocuStoreExplorer viewname and the project AuthenticationService like this:
`
providers: [
...
{
provide: 'AuthenticationService',
useClass: AuthenticationService,
},
{
provide: 'pageName',
useValue: Pages.SUBSTANCE_DOCU_EXPLORER,
},
],
``