Navigating to the Persona-based UI from custom Angular scripts

From the custom angular pop-up window, you can browse to the catalog or collaboration area pages of the Persona-based UI.

The goToSingleEditCatalog(catalogObj) method is used for navigation to the catalog or collaboration area of the single-edit page.

public goToSingleEditCatalog(catalogObj: any) { 
this.redirectItem.next(catalogObj); 
}

The goToSingleEditCollab(collabObj) is used for navigation to the collaboration area of the single-edit page.

public goToSingleEditCollab(collabObj: any) { 
this.redirectItem.next(collabObj); 
}

The goToMultiEditCollab(collabObj) is used for navigation to the collaboration area of the single-edit page.

public goToMultiEditCollab(collabObj: any) { 
this.redirectItem.next(collabObj); 
}

The flow handles invalid inputs, for example, if invalid catalogId is specified then an error notification

"Please provide valid input criteria. Click Back, to redirect to
the previous page.”

is displayed. Following table lists the supported redirection flow:

Redirection
Entry points		Catalog single-edit	Catalog multi-edit	Collaboration single-edit	Collaboration multi-edit
	Catalog single-edit	❌	❌	✓	✓
	Catalog multi-edit	❌	❌	✓	✓
	Collaboration single-edit	❌	❌	❌	❌
	Collaboration multi-edit	❌	❌	❌	❌
	Data explorer	❌	❌	✓	✓
	Search	❌	❌	✓	✓
	Custom Tool	✓	✓	✓	✓

Limitations

Following are the list of limitations:

Do not add base-preview.component.ts method as an inline script.
Always pass all the parameters with valid values while calling methods.

Sample custom page

Following sample custom page demonstrates navigation to the catalog or collaboration single-edit page. To run the redirection methods, you must provide valid input parameters to the methods of base-preview.component.ts file.

Valid input parameters can be passed illustrated in the following sample code methods:

redirectToSECatalog()
redirectToSECollab()
redirectToMECollab()

redirectToSECatalog and redirectToSECollab

import { Component, OnInit } from '@angular/core'; 
import { BasePreview } from './base-preview.component'; 
@Component({ selector: "redirectSE", 
	template: ` 
		<div class="backdrop" [ngStyle]="{ display: display }"></div> 
		<!-- modal --> 
		<div 
			class="modal" 
			tabindex="-1" 
			role="dialog" 
			[ngStyle]="{ display: display }" 
		> 
		<!-- modal-dialog --> 
		<div class="modal-dialog"> 
			<!-- modal-content --> 
				<div class="modal-content"> 
				<!-- modal-header --> 
				<div class="modal-header"> 
				<span class="ui-dialog-title"> Show All Items </span> 
				<button 
					type="button" 
					class="close" 
					(click)="closeModalDialog()" 
					aria-label="Close" 
					title="Close" 
					> 
				<span aria-hidden="true"></span> 
				</button> 
				</div> 
				<!-- modal-body --> 
				<div class="modal-body"> 
				<div 
				style="max-height: 270px;overflow: auto;font-family: Arial; font-size: 14px; color: #444;"
				> 
					<div>Related Items:</div> 
					<div *ngFor="let data of relatedItems"> 
						<input 
							#checkId 
							type="checkbox" 
							[value]="data" 
							(change)="changeSelection(data, checkId.checked)" 
						/> 
						{{ data }} 
					</div> 
				</div> 
				<div class="action-btn-wrapper"> 
					<button 
						class="btn btn-primary" 
						[disabled]="enableButtons()" 
						(click)="redirectToSECatalog()" 
					> 
						Go to Single Edit 
					</button> 
					<button class="btn btn-primary" (click)="redirectToSECollab()"> 
						Go to Single Edit Collab 
					</button> 
				</div>  
				</div> 
				<!-- modal-footer --> 
				<div class="modal-footer"> 
					<button 
						type="button" 
						class="btn btn-default" 
						(click)="closeModalDialog()" 
						title="Close" > 
						Close 
					</button> 
					</div> 
				</div> 
				</div> 
				</div>
			`
		}) 
		export class RedirectSEComponent extends BasePreview implements OnInit 
		{ display: any = "block"; 
		selectedIds: Array<number> = []; 
		relatedItems: Array<any> = []; 
		constructor() { 
			super(); 
		} 
		ngOnInit() { 
			this.relatedItems = [45335, 45336, 45337]; 
		} 
		closeModalDialog() { 
			this.display = "none"; 
		} 
		changeSelection(id, isSelected) 
		{ 
			if (isSelected) { 
				this.selectedIds.push(id); 
			} else { 
				let index = this.selectedIds.indexOf(id); 
				this.selectedIds.splice(index, 1); 
			} 
		} 
		redirectToSECatalog() { 
			let obj = { 
				type: "catalog", 
				catalogId: 5764, 
				itemIds: this.selectedIds 
			}; 
			this.display = "none"; 
			this.goToSingleEditCatalog(obj); } 
		redirectToSECollab() { 
			let obj = { 
				type: "collab", 
				collabType: "item", 
				entryIds: [60805, 61602], 
				collabId: 1247, 
				stepId: 614, 
				stepName: "step1"
			}; 
			this.display = "none"; 
			this.goToSingleEditCollab(obj); } 
			enableButtons(): boolean { 
				return this.selectedIds.length > 0 ? false : true; 
	} 
}

redirectToMECollab

You must provide FilterParams parameter with the attribute path and same filter value. Based on the value, item is filtered and visible in the multi-edit collaboration page.

redirectToMECollab() {
// need these details to open multi-edit in collab
	let multiEditcollabbata = {
		redirectionContainer: "multiEdit”,
		type: “collab”,
		collabName: “"E-Cart”,
		collabType: “item”,
		collabId: 9462,
		stepId: 7806,
		filterParams:[{"attrpath”: "E-Cart-Catalog-Spec/Brand”, "value": "Samsung" }]
	};
	this. goToMultiEditCollab(multiEditcollabbata);
}