how to get the editor buttons in the CMS UI using OCM approach

Author: Yamini
Publication Date: 1/20/2020 5:52

Hello Community,

We are having a issue in getting the respective preview id of a section template in our angular code.

here's a sample code of our Angular application into content creator using OCM approach:

<div *ngFor="let map of pageMap | keyvalue">                       //here the data type of pageMap is <String,String>

       <p data-preview-id="map.key" [innerHTML]="map.value"></p>

</div>

wherein the page map variable contains "eyJkYXRhLWZzLWF0dHJzIjoiZXlKc1lXNW5kV0ZuWlVGaVluSmxkbWxoZEdsdmJpSTZJa1JGSW4wPSIsImRhdGEtZnMtaWQiOiJleUpwWkNJNk5UUXhNVGN3TENKemRHOXlaU0k2SWxCQlIwVlRWRTlTUlNKOSJ9"

this as key (which is a previewId)

But on running this application inside content creator we get the following error in First spirit content creator

cannot decode previewId 'map.key' IllegalArgumentException: Illegal base64 character 2e

java.lang.IllegalArgumentException: Illegal base64 character 2e

at java.util.Base64$Decoder.decode0(Base64.java:714)

at java.util.Base64$Decoder.decode(Base64.java:526)

at com.espirit.tpp.PreviewIdFunction.atob(PreviewIdFunction.java:322)

at com.espirit.tpp.PreviewIdFunction.toMap(PreviewIdFunction.java:186)

...

Because of the error we are unable to get the edit buttons in the editor outline,

P.S: However if we pass the previewId value in the data-preview-id directly as a string instead of map.key, we get the editing options in the editor outline without any error.

Tags: caas, editorid, ocm, previewid, webedit