Blog posts by Ha Bui

Global Notification

2023-02-16T09:12:27.0000000Z

Great day everyone!

If you familiar with Using user notifications, I'm glad to introduce the new global notification UI. Notifications are moved to the navigation bar, so it is no longer only for the CMS UI.

You can get the new release version here: EPiServer.CMS 12.17.0 (optimizely.com)

The new UI has the following:

A bell icon, moved to the top navigation bar
An indicator for new or unread messages
A notification panel

When you click an unread notification, it is marked as read. Click Mark as Read to change all unread messages statuses to read.

Notes

If the notication contains content uri then you can click on the notification to go to the link.
The list is lazy load on demand; just scoll to see more.

Global notification also exposes broadcastchannel API (/global/notification/message), Just join it and you can use the pub/sub pattern.

MessageHub.js already has it inside:

this._globalNotificationBroadcaster = new BroadcastChannel(this.statusTopic.globalnotificationmessage);

Last but not least: all changes for UI are on the client side to pub/sub message. Nothing changes for the server side. Isn't that good news?

Thank for reading!

How to integrate TinyMCE cloud plugin with EPiServer

2022-08-24T06:45:00.0000000Z

Hi everyone,

Recently, we got many questions regarding How to integrate the TinyMCE external cloud plugin (SpellCheckerPro for instance) with EPiServer CMS and EPiServer.CMS.TinyMCE add-on.

Did you try that before? And got a headache with kind of below errors?

Don't worry! No more headaches with the recent release of EPiServer TinyMCE!

EPiServer.CMS.TinyMce 2.13.8 (NET FRAMEWORK) (EPiServer.CMS.TinyMce 2.13.8)

For the SpellCheckerPro plugin then few lines of the configuration below will help you easy to integrate with EPiServer CMS:

Prerequisites
TinyMCE cloud API Key

EPiServer TinyMCE Initialization

context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .AddExternalPlugin("tinymcespellchecker", "https://cdn.tiny.cloud/1/<YOUR_API_KEY>/tinymce/4.9.11-104/plugins/tinymcespellchecker/plugin.min.js")
                    .AddEpiserverSupport()
                    .Toolbar("spellchecker language spellcheckdialog")
                    .AddSetting("spellchecker_rpc_url", "https://spelling.tiny.cloud")
                    .AddSetting("spellchecker_api_key", "<YOUR_API_KEY>");
            }

Note: Because EPiServer CMS TinyMCE is using TinyMCE v4 so please choose the correct version of the SpellCheckerPro plugin. Otherwise, it won't work as expected!

Screenshots

Easy right? I hope that helped you!

CMS 12 Optimizely CMP Integration UI addon

2022-07-06T09:15:24.0000000Z

Hi everyone, do you know about the great blogpost from Kate: CMS 12 integration with Welcome’s Digital Asset Management Librar (optimizely.com)

If not then I would suggest you please go throught that first to get overview of main purpose and user case of CMS 12 and Welcome DAM integration!

After reading but you still got struggling about: How to enable it in your template? then you are in right place. Here is detailed instruction for you:

Optimizely CMP UI integration

This will describes standard setup that you need for a template site in order to able to use Optimizely DAM UI integration packages.

Prerequisites

EPiServer.CMS.Core 12.8 or later
EPiServer.CMS.UI 12.9 or later

Installation

Install from command line

$ dotnet add package EPiServer.CMS.WelcomeIntegration.UI

In `Startup.cs` add following line:

services.AddDAMUi();

Start your site and use!

Configuration Options

Customize option can be done via `application.json` under `EPiServer\Cms` section, now we are supporting:

{
  "DAMUi":{
    "Enabled":true,
    "Settings":{
      "Welcome":{
        "IconClass":"dijitNoIcon",
        "AvailableTypes":"episerver.core.imagedata",
        "StoreName":"episervercmsdamcontentcreation",
        "Endpoint":"https://cmp.optimizely.com",
        "PathAndQuery":"/cloud/library-picker?assetTypes=image"
      }
    }
  }
}

Under "DAMUi", with Settings options then you can:
1. Change icon class so can use whatever icon you wants (default is "dijitNoIcon")
2. Change "AvailableTypes" so the new editor command only be added if it is (or inherited from) one of available type. (default is "episerver.core.imagedata" so all properties that allow an image to be added will have the new command)
3. Change store via "StoreName" so that you can customize server side code (with your new store) to add more your business logic into. (default is "episervercmsdamcontentcreation")
4. Change end point via "Endpoint" so that you can transform the root DAM domain for each environment you have (inte, preprod or prod) (default is "cmp.optimizely.com")
5. Change path and query so that you can add default filter for the DAM library picker by image, video or all (default is "image")

Screenshots

From Optimizely CMP DAM... for ContentArea

From Optimizely CMP DAM... for ContentReference property with thumbnail editor

Popup open when click (Optimizely CMP DAM login is required for the 1st time)

After login then next time, library picker will be shown

Select your asset then click `Choose`, popup will be closed then content will be saved (thumbnail will display after a while)

Loading indicator whenever view or context is changed

2021-11-02T12:19:48.0000000Z

Hi everyone! As you may know, sometimes the CMS Edit UI can take time to complete loading (depending on network, infrastructure or site data), especially page for edit mode in a complexed page view (such as a Start page).

Slow loading can occur after an editor clicks Edit on a content page, or changes view or content context, or if new content is requested while still in edit view. This can confuse and annoy editors when they edit content.

In CMS UI 12.2.0, we introduced a new StandableBorderContainer that should resolve the issues!

To see the loading indicator in action see Video: Loading indicator.

How to use this?

Change BorderContainer from your custom view component to StandableBorderContainer.

...

var mainContentContainer = new StandableBorderContainer()
  .Add(new ContentPane { PlugInArea = "/episerver/cms/action" }, new BorderSettingsDictionary(BorderContainerRegion.Top))
  .Add(new ContentPane { PlugInArea = "/episerver/cms/maincontent" }, new BorderSettingsDictionary(BorderContainerRegion.Center));
...