Introduction

This article provides comprehensive instructions for customizing the Znode Admin Console experience. It enables administrators to create and manage custom pages and sections for predefined entities, tailored to specific business requirements.

This document is intended for Znode custom implementation developers—both internal and external—who are responsible for extending and enhancing the Znode platform.

Prerequisites

• Access to the Znode Admin Console with valid administrator credentials
• Custom API SDK set up on the local machine or available as an external URL
• Familiarity with Znode API and basic web development concepts
  
  

Objectives

• Set up external URLs for custom pages and sections
• Create and deploy custom admin web forms
• Manage custom data through Znode and custom APIs
• Integrate custom pages and sections within the Znode Admin Console
  
  

Setup External URL for Custom Pages and Sections

Upon setting up the custom API SDK on the local machine, a corresponding library named Custom.Admin.Core is downloaded in the project folder. This library contains the required controllers for the .cshtml forms that are essential for creating new custom pages or sections.

The .cshtml file can be found at:

\Engine.Custom.Api\CustomAdmin\Views\{ControllerName}\{ControllerAction}.cshtml

Example:
If using a StoreController and a StoreDetails action, the respective file path would be:

\Engine.Custom.Api\CustomAdmin\Views\Store\StoreDetails.cshtml

Within the .cshtml file, forms can be submitted either to a custom admin controller post action or to a custom API.

Root URL Usage

The root URL should be generated using the request context to avoid referencing the parent page URL. This can be done using:

Context.Request.Scheme + Context.Request.Host

API Invocation

Any Znode API or custom API can be invoked from the custom admin action using API gateways and clients. The specific logic may vary by implementation.

CORS Configuration

To ensure proper access, the URL of the Znode Admin Console loading the custom form must be permitted by adding it to the ZnodeAdminURLCorsPolicy key in the following path:

\Engine.Custom.Api\appsettings.json

Example:
For the StoreDetails action in StoreController, update the configuration accordingly.

Note: This configuration is managed by the DevOps team in the blackbox environment.

Query String Values

The query string used by the controller action can accept parameters based on available macros defined during section creation. These parameters can be used to retrieve or manipulate data using either Znode APIs or custom APIs.

Example:
 The StoreDetails action can use StoreCode and PortalID as parameters.

Deployment

Once the .cshtml, controller, action, and API calls are configured, use the following command to deploy:

Znode deploy CustomAPISDK <Environment> <optional: SDK path>

After deployment, access the custom page using the generated URL and use it in the Znode Admin Console.

Add Custom Page

• Log in to the hosted Znode Admin Console.
• Navigate to “Dev Center” > “Admin Customizations.”
• Click the “Add New” button.
• Select “Page” as the content area.
• Add the custom URL in the “Content Details” field.
• Assign the appropriate role access.
• Click the “Save” button.
  
  

Add Custom Section

• Log in to the hosted Znode Admin Console.
• Navigate to “Dev Center” > “Admin Customizations.”
• Click the “Add New” button.
• Select “Section” as the content area.
• Add the custom URL in the “Content Details” field.
• Assign the appropriate role access.
• Use macros shown in the help text as expected query string parameters.
• Click the “Save” button.
  
  

Use Custom Section

After creation, the custom section becomes available in the designated entity view based on the assigned role.

Example:
 If added to the Stores section, the custom section appears under:

Stores > Manage Store

Macros are automatically replaced with the corresponding values. These values can then be used to fetch or display data using Znode APIs or custom APIs.

Example 1: Orders Dashboard

Use Case: Display order-related consolidated data

Administrators may require custom pages to display order data not available in the base version of Znode. This can be achieved by:

• Creating a custom admin page using the custom API SDK
• Consuming Znode APIs or new custom APIs
• Hosting additional custom tables, if required
• Applying styles through a .cshtml view
  
  

The deployed page can then be registered as a custom admin page.

Example 2: Coupon Configuration

Use Case: Maintain coupon configuration data

To manage coupon-related configurations not covered in the base Znode product:

• Create a custom admin page
• Use Znode API or custom APIs to fetch and save coupon date
• Implement and host additional custom tables, if needed
• Apply UI through a custom .cshtml view
  
  

Once deployed, the page can be added as a custom section under the “Promotion and Coupons” entity.

Queries and Remedies

How to Deploy the Custom Admin Form?

Use the following command:

Znode deploy CustomAPISDK <Environment> <optional: SDK path>

The form can be accessed at:

https://<CustomAPISDKHostedURL>/CustomAdmin/<Controller>/<Action>?<QueryString>=<Value>

Use this URL in the Znode Admin Console.

How to Display Custom Table Data?

• Create a custom API that consumes data from the custom table.
• Reference this API in a custom Znode Admin form.
• Deploy the form.
• Use the form’s URL as a custom section in Admin Customizations.