Blog posts by Matthew Slim

New menu system released!

Thu, 29 Jun 2023 16:10:25 GMT

With the release of the 12.22.0 Optimizely CMS UI packages, the menu system has been redesigned and relocated to the left hand side as a result of a company initiative.

Whilst relocating this menu, it has been give a more modernised look and feel, whilst ensuring no core functionality is lost. The new menu will always be present to enable much smoother navigation and overall a more seamless experience within the CMS.

There are six individual tabs within the new menu system:

Dashboard
Edit
Reports
Audiences (formerly Visitor groups)
Settings (formerly Admin)
Add-ons

Add-ons were also included so you can access your third-party add-ons.

This new menu system has been designed with the end user in mind, so when a selected menu has no children (for example Dashboard, Reports), the menu will be fully expanded to show both icons and its associated name alongside that icon. When a menu item has a nested level or a child (for example Settings), the menu will only display the icons. The only exception to this rule is the Edit menu item, which has no children but as we will have the content tree aswell, we want to ensure the user has enough screen estate to conduct their editorial process as usual, so therefore we only show the icon view in the new menu system whilst in Edit mode.

Whilst the new menu system only displays icons, you can hover over each of the menus icons to display a tooltip with each respective label, as shown in the diagram below:

You will be presented with the same screens whilst going into the all menus apart from Settings. As with this new menu, rather than another having to navigate via another toolbar to access specific Admin settings, you are presented with all available Admin settings within the second level of the menu system.

When a category itself has its own children, for example 'Access Rights', these will be made clear as they will be collated together in their own category, as shown in the screenshot below.

Caching & Rendering of metadata from the DAM

Fri, 02 Jun 2023 14:42:37 GMT

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM.

We have enabled the retrieval of metadata for assets from Welcome's DAM via a C# API. This allows the metadata to be utilised to determine how the asset is rendered in the delivery site.

We have also enabled caching of the metadata, so in the event where the Welcome DAM library may be temporarily unavailable, as long as the metadata has been cached, it can still be used to establish how the asset is to be rendered in the delivery site. By default, caching has been set to a time period of 10 minutes, but the option to confiugure this is available.

The existing Welcome DAM asset picker integration has not changed, and when new attributes have been added in the Welcome DAM and are included in the metadata, it will be available in the API without any necessary code changes.

Configuration

Pre-requisite: Install Optimizely.Cmp.Client

We've added a second, optional parameter to the AddDAMUi method where you have to provide the credentials as shown in the picture below.

You can also provide the Client ID and Client Secret via appsettings.json, as the second parameter is an Options configuration - CmpClientOptions

To use this feature, there are three possible options:

Use the provided C# service to get the metadata from Welcome by injecting the IDAMAssetMetadataService where you wish to use it.
- The IDAMAssetMetadataService contains one method, GetAssetMetadata(Guid id) which can be used to retrieve metadata from Welcome using the GUID of a specific asset. This GUID can be found within the information dialog of any asset in Welcome.
Use our HtmlHelper extension method, RenderTagWithMetadata which will render an appropriate HTML tag, based on what the asset being retrieved is.
- To use it, you have to import @using EPiServer.Cms.WelcomeIntegration.UI.Helpers; inside a .cshtml page of choice, as well as use the page model which contains a ContentReference property
- Then, call the @await Html.RenderTagWithMetadata(x => x.YourWelcomeContentReference) with an expression which provides a ContentReference. This ContentReference should be linked to a Welcome Asset
- Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag
Use our TagHelper called DAMAssetTagHelper which does the same thing as above, but is used a bit differently
- To use it, first add the tag helper in your _ViewImports.cshtml file:@addTagHelper *, EPiServer.Cms.WelcomeIntegration.UI
- Add <dam-asset content-reference="@Model.YourWelcomeContentReference"/> to your .cshtml page of choice
- Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag

Note:

We currently support images, videos and some files, such as PDFs, Word Documents, Excel Spreadsheets, Zip and 7Zip files. In the case of files, an anchor tag will be rendered to link to that specific file.
Currently, this is only supported in CMS 12.

Example

Quick example with HtmlHelper and TagHelper on Alloy site:

End result:

New dashboard implemented in CMS UI 12.18.0

Tue, 28 Mar 2023 10:49:27 GMT

As part of the CMS UI 12.18.0 release, a new dashboard has been added as a ‘one stop shop’ to enable editors to access all of their content items, thus allowing them to create, edit and review content and have a more holistic view of content and where it sits in the workflow.

The dashboard aims to overcome tedious day to day issues editors faced when searching for specific content. Editors would have to scroll through potentially very complex content trees to find what they are looking for, which in itself could cause some performance issues, and the dashboard fixes this by listing out all of the content items they have been working on in an ordered manner. A concept of the dashboard was first demoed during Opticon 2022, and it generated some really great feedback.

The dashboard will be the first port of call once logged in if the user has access to the CMS Edit UI.

First Release

The first release of the pre-configured dashboard includes two main features (Workflow statuses & Broken Links).

Workflow statuses:

The workflow statuses gadget allows the editors to locate all of their previous work, from all parts of the workflow. The default statuses are as follows:

CheckedOut (Drafts)
AwaitingApproval (In Review)
CheckedIn (Approved)
DeplayedPublish (Scheduled)
Rejected (Rejected).

Please note you can add your own status settings if you prefer to.

When you go onto the Dashboard, a total count for each workflow status will be presented, and if there are more than 5 pieces of content within one particular status, then pagination will be implemented allowing editors to access all of their content as they please.

Editors will be able to filter the content shown by either content name, or by changing the ‘Modified By’ tab to either ‘Anyone’ or ‘Me’.

Sorting via all 3 columns is available (Name, Last modified, Modified by), where the default setting is sorting by Name ascending, and the last modified date is displayed in the local time zone.

Broken Links:

The broken links gadget allows the editor to see what broken links exist at the time the Link Validation scheduled job was ran. A ‘Last Updated Date’ is displayed alongside this in the local time zone (using ICurrentCultureAccessor.CurrentCulture).

The editor is then able to click on the link which will direct them to the content where that broken link exists. The broken links gadget will only show content that the current user has the permissions to edit, and will only be updated when the dashboard has been refreshed.

The total count of broken links is generated from the number of broken links that exist in the database.

The broken links gadget will show up to 5 items on the dashboard, and the view full report link is available will which navigate the user to the link status report page – providing more detail around each individual broken link.

If content contains 2 or more broken links, this will be represented within the broken links gadget to avoid duplicated items to provide even more appropriate information for the editor.

Future iterations?

As this is only the first release, we do plan on continuously improving the dashboard and implementing new features to improve the overall usage & experience of this new feature!