Genpact Cora Knowledge Center

Support

Template Project for Portal Customization

Overview 

Among other things, the oneClick_Install_Env_Local.ps1 PowerShell function downloads and unpacks the customization project template. The customization template is a Visual Studio project that enables you to manage back-end features, such as shared resources, configuration transformation, custom C# code, among others and then apply your changes onto the portal application.

Text 
Description automatically generatedCustomization template file structure

The unpacked folder structure includes several folders. Some are dedicated for common customization scenarios that don't require React development and others include templates for complex React customization scenarios.

Folders related to common customization scenariosFolders related to scenarios that require React development
/deploy: Contains PowerShell functions for setting up the development environment for portal customization./src/app/modules: Contains containers ("pages") onto which you add React components. These containers are ultimately your pages, similar to aspx files that contain ascx files without any logic.
/src: Contains code templates for the customizable components./src/components: Contains a React components folder, where each component is an independent component with single responsibility.

The addons folder

The templates under the addons folder are helpful for customization scenarios that do not require React development. 

For example:

  • Add a custom menu item transformation
  • Add other configuration file transformations
  • Add a Form Viewer control that loads a custom Cora Orchestration view within an aspx page, which opens as a portal tab
  • Add C# code that compiles at runtime
  • Add CSS files, fonts, images, and other assets to the Shared Resources folder based on the provided folder hierarchy

Folder location: /src/addons

Graphical user interface, application

Description automatically generated

addons folder contents

FolderContents
/aspnet/app_code Contains custom C# code.
Only *.cs files are copied into the customized application and compiled on demand at runtime.
/aspnet/pages Contains custom ASP.NET pages.
Only *.aspx files are copied into the customized application's root folder.
/assets Contains static and binary contents that are copied as is into the customized application's root folder.
/settingsContains config files and resources that are copied into the customized application's root folder.
/transform Contains partial XML configuration files that are applied onto existing configuration files according to the Shared Resources hierarchy and copied to the customized application's root folder.
metadata.json Contains the customization package name and version. This file is used by the application build scripts.


IMPORTANT 
All the files and folders that you add to the addons folder keep their original file folder structure after they are copied to the customized application.
For example, if you add a ‘mycustom’ folder with an aspx file to /aspnet/pages/custom/mypage.aspx, then the path in the customized application looks like this: inetpub\wwwroot\Cora SeQuence\Flowtime 1\Custom\mypage.aspx.

The services folder

Application services are singletons and do not hold a state. They mainly contain common and shared functionality for daily usage, such as loggers, managers, and web clients, among others. 

Folder location: /src/services

Graphical user interface

Description automatically generated with low confidence

Available services

FolderDescription
client-service Performs HTTP requests to API and web servers.
component-service Renders React components from a URL.
config-serviceManages application config files.
context-service Handles application session context.
inject-serviceAllows dependency injection.
log-serviceDisplays log messages on the browser console.
navigation-serviceHandles application navigation between known and registered routes.
route-serviceManages components and routes.
shared-codeShares code between the portal application and the customized application.
side-effect-serviceHandles side effects and events.
state-serviceManages Redux store and application states.
translation-service Enables the use of application localization resources.

Service usage example:

Text 
Description automatically generatedLine 1: Import service
Line 4: Call for service functionality

The modules folder

Application modules are similar to HTML pages, but in component-based React, they are called modules. A module represents a separate business logic. Each module can contain multiple inner components. 

For example: notifications is a module that has Title, Grid, Search, and Filter components and performs HTTP requests to receive information and bind it into its components. 

Folder location: /src/app/modules

The components folder

Application components are a lower-level logic or UI representation code that can be reused multiple times in different places without the need to copy paste. They act like classes in object-oriented languages. Each rendered component has its own instance reference. 

For example: The Menu component has a few child components of type Link. Each Link component has its own text and navigation URL. 

Folder location: /src/components/common

Component usage example:

Text 
Description automatically generatedLine 1: Import component

Line 6: Render component


Global configurations

You can set global configurations and apply them to the main portal application. 

Global configuration file location: /src (root level)

Graphical user interface, application

Description automatically generated

Global configuration JSON files

appConfig.jsContains custom configuration that is applied to the main portal application at runtime.
appStyles.cssContains custom styles that are applied to the main portal application at runtime.
exported-modules.js Contains information about the customized components. The information is applied to the portal application during application build and packaging.