Rendering a custom view in Suite8 mode

[Harshad]

Hi Jarek, I don’t know if the following helps you, but this will help to create a custom page just like the login page. Sharing here to get the feedback.

I have created a custom page that says just ‘hello’. The following steps helped me to achieve to add a custom page in suite8.

1.Create a new component called ‘hello’ at
extensions/defaultExt/app/src/views/custom/components/hello/hello.component.ts

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'scrm-test-ui',
    templateUrl: './hello.component.html',
    styleUrls: [],
})
export class HelloUiComponent implements OnInit {
    name:string = 'Harshad';
	constructor(protected router: Router) {
    }
    ngOnInit() {
		console.log('test init');
    } 
}

2. Create the HTML UI code at
   extensions/defaultExt/app/src/views/custom/components/hello/hello.component.html

<div style="padding-top: 4rem;">
	Hello {{ name }}
</div>

3. Create the hello module file to include the hello component at
   extensions/defaultExt/app/src/views/custom/components/hello/hello.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {HelloUiComponent} from './hello.component';

@NgModule({
    declarations: [
        HelloUiComponent
    ],
    exports: [
        HelloUiComponent
    ],
    imports: [
        FormsModule,
        CommonModule,
    ]
})
export class HelloUiModule {
}

4. Add hello guard service at extensions/defaultExt/app/src/services/custom/hello-guard.service.ts

import {Injectable} from '@angular/core';
import {Router, UrlTree} from '@angular/router';
import {Observable, of} from 'rxjs';
import {catchError, map, take} from 'rxjs/operators';
import {AuthService, SessionStatus,SystemConfigStore,AppStateStore} from 'core';

@Injectable({
    providedIn: 'root'
})
export class HelloGuard  {
    constructor(
        protected router: Router,
        private authService: AuthService,
        protected systemConfigStore: SystemConfigStore,
        protected appStateStore: AppStateStore
    ) {
    }

    canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
		return true;
    }
}

5. Add the above component and guard service to config the router for the ‘hello’ page at
   extensions\defaultExt\app\src\extension.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';

import {Route, Router} from '@angular/router';
import {BaseMetadataResolver,AuthGuard,SystemConfigStore} from 'core'; 
import {HelloUiComponent} from './views/custom/components/hello/hello.component';
import {HelloUiModule} from './views/custom/components/hello/hello.module';
import {HelloGuard} from './services/custom/hello-guard.service';

@NgModule({ declarations: [], imports: [CommonModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class ExtensionModule {
    constructor(private router: Router, protected systemConfigStore: SystemConfigStore,) {
		console.log('extension module enabled');
		
		  const routes = this.router.config;
		  const configRoutes = this.systemConfigStore.getConfigValue('module_routing'); 
		  console.log(configRoutes.length);
		  routes.push({
			path: 'hello',
			component: HelloUiComponent,
			runGuardsAndResolvers: 'always',
			canActivate: [HelloGuard],
			resolve: {
				metadata: BaseMetadataResolver
			},
			data: {
				reuseRoute: false,
				load: {
					navigation: false,
					preferences: false,
					languageStrings: ['appStrings']
				}
			}		
		 });
		 console.log(routes.length);
    }
    init(): void {
    }
}

6. Enable the extension at extensions\defaultExt\config\extension.php

   'enabled' => true,

7. Run php bin/console cache:clear

8. Run the following command to test the UI Angular Code
   yarn run build-dev:extension defaultExt –watch

9. Reload the page (Control + F5)

10. Change URL in the address bar
    

Please let me know your feedback or suggestions. Thanks!