Create Visual Update 1 App

About

This topic provides instructions to manually create the Visual Update 1 application and where to put the application files. You might be creating an application to use the default visual styling that comes with Visual Update 1 or you might be creating an application to point to customizations you have made to the visual update files.

Prerequisites

Connections Customizer

In this Visual Update example we use Connections Customizer to apply the new design specification to Connections, simply by overriding CSS. Ensure you have Component Pack and Customizer configured before going forward. Read Configuring the Customizer component for more information.

"Verse Theme (Default)" or "Hikari" theme

Connections must be set to use one of these default themes: "Verse Theme (Default)" or "Hikari".

1. Download files

Fork and clone hclcnx/cnx-custom-theme files on your local system

We recommend creating a fork and then clone that fork to your local file system. You can clone files using GitHub Desktop or a terminal window.

Once you have the files locally you are set to go. Make note of the local path for the next step.

2. Make files available to Customizer

For On-premises customers

Follow the instructions to Manage Connections Customizer apps in the product documentation. In summary you will...

• Copy all the downloaded files to the 'pv-connections/customizations' directory on the Storage node.
• Import a .json file. A sample .json file can be found in cnx-custom-theme/vu1-include-css.json and was downloaded as part of these application files.

For Cloud customers

Important: Refer to HCL Connections Customizer documentation as you complete this step.

1. Post visual update files into a GitHub repository that can be accessed by Connections Customizer.
   • By default Customizer, via the include-repo property, looks for customizations in a repository in the public HCL Connections GitHub organization (https://github.com/ibmcnxdev). Refer to the HCL Connections Customizer documentation for instructions to create or share a repository.
2. Update SCSS variables to reference your GitHub repository. Open /global/_repoName.scss and update the value of repo-name. Compile the SCSS changes.
3. Prepare the .json file used to define the application. A sample .json file can be found in cnx-custom-theme/vu1-include-css.json. In the .json file, update 'include-repo' name with the correct GitHub repository name.

     "include-repo": {
       "name":"cnx-custom-theme"
     }

3. Register the application

For On-premises customers

As an administrator, go to the Apps Manager to register the application. Follow the instructions to Manage Connections Customizer apps in the product documentation.

For Cloud customers

An administrator can add a Customizer application as an Organization Extension. The Customizer application is defined in a .json file which identifies the extensions that need to be targeted and the actions that need to be performed.

Refer to HCL Connections Customizer documentation for more information.

1. Locate Admin in the top navigation and select Manage Organization.
2. Go to Organization Extensions.
3. Click the new App Manager link at the top of the page.
4. Click the New App button and a .json template is added.
5. Replace the .json template with the contents of the cnx-custom-theme/vu1-include-css.json file that you updated with your GitHub repository name.
6. Save the changes.

4. Periodically update with the latest files

This application is being updated all the time, to fix issues and include support for more apps and pages. Periodically pull updates from hclcnx/cnx-custom-theme.