Hi,
I have tried installing the newly created Bynder sample extension (very happy to see it here,) except there seems to be an issue executing the Bynder client js file, due to iframe sandboxing.

It looks like the client file is trying to read from sessionStorage but is being blocked by the browser due to it coming from a different origin.

Wondering if you have seen this issue during development?

Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

Certain changes to table arrays e.g. editing values in a table, adding a row are not triggering autosave however other changes to tables reliably trigger autosave e.g remove row.

Here is my schema:

{
"title": "FTE2",
"type": "array",
"format": "table",
"uniqueItems": true,
"items": {
"type": "object",
"properties": {
"year": {
"title": "Year",
"type": "integer",
"enum": [
2020,
2019
],
"default": 2020
},
"fteMin": {
"title": "FTE Min",
"type": "integer"
},
"fteMax": {
"title": "FTE Max",
"type": "integer"
}
}
}

 };

In Safari and Firefox the Cloudinary UI extension button pops up a modal and asks you to log in to Cloudinary, and attempting to do so hangs. In Chrome it works perfectly.

I have a Contentful space with two environments - Master and demo. When I install the Cloudinary extension it is only visible in Master. I have to choose the demo environment and then do another manual install, via Github, to have it appear in demo.

My understanding was that when you install a UI extension into a Space all environments had access to that extension.

Trying to install the extension, using the following URL for extension.json:
https://github.com/contentful/extensions/blob/master/samples/content-tree/extension.json

Fails with the following error
Could not fetch the descriptor file. Please check the URL and try again.

Thanks,
Martin

I'm slightly confused by the…

Navigate into the extension folder
cd examples/wistia

bit. When i clone ui-extensions-sdk.git there is no "examples" dir.

Hi,

I'd like to add conditional logic to a specific Contentful content model. The logic would start from radio buttons, where the user would make a selection, and different form content would appear according to their selection. Something along the lines of:

<bunch of other fields>
...
<a selection field (e.g. radio button>
If A, show fields 1,3,4
If B, show fields 3,5,2
If C, show fields 6,1,4
...
<bunch of other fields>

From what I understand, building a custom UI extension is the key.

QUESTION: Do we have to re-create the entire content entry form in the UI extension (the <bunch of other fields>), just to achieve our desired conditional logic in one specific place?

In early exploration of sample code, this seems like the case. Can we avoid this? I haven't seen an explicit statement one way or another.

I added the slug generator to a project a couple of months ago and had no problems, added it to another one today, and this happened:

The slug won't generate and all three icons show up in it.
I read this error: Cannot read property 'onValueChanged' of undefined

The problem is in this line of the plugin:

var titleField = api.entry.fields.title

The generator assumes that the title is the field with field-id title. Wasn't the case for this project.

How to solve:

Either

1. Get the title from the entry title, not the field title
2. Update the README

I have followed this tutorial to add a slug to one of my content types.

I found that the slug is not generated on any of the already existing content entries. While it does work on the new entries of the same content type.

Is this a bug or there is a migration process to generate slugs on existing entries?

existing entry:

new entry

Content Model:

Thanks.

After cloning this, running npm install, pushing to contentful using contentful-extension create --space-id <space-id>, then running gulp watch, when I navigate to localhost:3000, the code has loaded but the function initContentfulJsonFormEditor (cfApi) is never called because cfApi is undefined.

Any ideas how to get this running locally? It works in Contentful, but doesn't work locally.

We use a react-hook to get access to the SDK in our contentful-extension.

Since our extensions are running in next.js, we use this mechanism to allow server side rendering.
When deployed this works as expected but if we host this extension on localhost the chance of the callback being called seems to be 1:100. (see logs in the code-sample below)

We are using this extension in Contentful (not looking at the localhost itself as we are aware that it won't work outside app.contentful.com)

Here's a screenshot of what we see in contentful: (we show a loader until SDK has been loaded)

Here's the actual code that we use:

import React from "react";
import { FieldExtensionSDK } from "contentful-ui-extensions-sdk";

export const useContentfulSdk = () => {
	const [contentfulSdk, setContentfulSdk] = React.useState<null | FieldExtensionSDK>(null);
	React.useEffect(() => {
		(async () => {
			const { init } = await import("contentful-ui-extensions-sdk");
			console.log(typeof sdk); // just for debugging. works 100% ("function")

			init(sdk => {
				console.log("SDK loaded"); // just for debugging. works ~1% 💩
				setContentfulSdk(sdk as FieldExtensionSDK);
			});
		})();
	}, []);
	return contentfulSdk;
};

Im trying to follow the publish-confirm ui extension example however it does not display the messages:
"Entry is linked in other entries"
"Unpublish anyway"

When clicking unpublish on an entry with published references.

Steps to reproduce:

1. Run the publish-confirm extension and apply it to a content model.

2. Go to an entry of the above model that has references and make sure that it and its references are published. I

3. Click the "unpublish" link provided by the ui extension.

4. Observe that the message is not displayed.

I think this is to do with:

this.props.extension.space
.getEntries({ links_to_entry: entry.sys.id })

not working

For example, will folder/page-name correctly configure a url, www.my-site.com/folder/page-name or will it just break?

I'm trying to run the bacon-ipsum sample and it works when plugged into the CF UI, but is not running locally. The window.contentfulExtension.init function doesnt seem to be firing and is not giving any error messages.

I've already set up the Contentful CLI and added my Access Token. I also tried wrapping it in a document.ready since the sample uses jquery, but that is also not working. Is this functionality still working for you guys?

The link for the inbound references extension does not work (maybe the repo is private):
https://github.com/contentful/extensions/blob/master/samples/inbound-references

I have a user who would like to see a sidebar UI extension example--is there a way you could make this public?

I’m testing this extension out and it seems that there isn’t a field for a product’s description. I’m using gatsby-source-contentful if that’s helpful at all.

Hey there,

Thanks for the great work with the Shopify extension.
https://www.contentful.com/developers/marketplace/contentful-ui-shopify/

I've installed the plugin and got it working within Contentful, I was just wondering how to select multiple products?

It appears I can only select one at a time? Am I missing something obvious?

Thanks in advanced,

For the Alloy editor extension, the command make create uploads AND serves the UI extension (so the user doesn't need to type in make serve as per the docs).

Also, the extension is uploaded directly to Contentful's server so it is never hosted in the local environment. Therefore, mention of make update-force may be confusing and unnecessary.

Should we change the documentation? I can create a PR if you agree with this assessment.

We would like to display a field value of a list entry right in the list editor in order to improve the editing experience for our content editors.
However, the list editor is not open source right now.
Please consider changing that so that the list editing experience can be improved.

Hello,

There is a broken link in the README.md in the last sentence:

You can go on from here by having a look at the UI Extensions API documentation documentation.

I would have submitted a pull request for a fix but I actually can't find what UI Extension API doc you are referring to. Is it this link?

Thanks!

There is currently an issue with the way the Bynder assets plugin is storing the values. The plugin already stores an empty array, even if no image was selected.

This breaks the fallback system, as Contentful thinks that the image is translated.

You can see the issue in the screenshot. When we now perform a graphql query for this entry, we receive an empty array instead of the default language's picture.

I guess this is a feature request. It'd be nice to be able to have sidebar-only extensions — i.e., extensions that are not tied to a specific field.

I want to create a UI extension that generates a code snippet for our publishing team to copy/paste. The snippet will include auto-generated tracking links that include the entry title and other fields. This extension should live in the Contentful sidebar.

However, the only way to include this extension is to create a new field that uses the extension, even if that field isn't needed for anything. For example, the Contentful URL checker UI extension requires that you add a Boolean field to your content model, even though that field won't be used for anything.

So, would it be possible to make UI extensions that are not tied to a field, live in the sidebar, and have access to the entry being edited?

Thanks!

EDIT: I noticed that the SDK docs mention entry-level extensions that just live in the sidebar. This is basically what I'm referring to — but I don't see any way to make those without tying them to a specific field...?

I need to allow my editors to create inline links to other entities from text in a markdown field.

Because this feature isn't provided out of the box, I was hoping to clone and modify the markdown widget so I could customize the default "link" dialog. I'll use the dialog.selectSingleEntry() to allow them to select an entry. And with their selection I'll create a markdown link like so..

[link text here](entry:ABC123)

Then, in my web application code, I'll expand that into a url.

I can use an alternate Markdown editor if yours can't be open sourced, but I thought I would ask first.

Not sure if this is a duplicate of #49 but it would be nice to have the option to create a list from the toolbar.

The current toolbar is limited to the following:

A more robust one such as this would be great:

Hello Contentful,

First of all thank you very much for Contentful system and recent updates for UI extensions API!

I want to install Alloy Editor UI extension and was leading the instructions from https://www.contentful.com/r/knowledgebase/ui-extensions-guide/ and got a problem:

On the paragraph 'Building an editor extension' there is an html file example with lines:

<link href="https://contentful.github.io/extensions-samples/libs/alloy-editor/assets/alloy-editor-ocean-min.css" rel="stylesheet">
<script src="https://contentful.github.io/extensions-samples/libs/alloy-editor/alloy-editor-all-min.js"></script>

Those 2 links above are broken: https://contentful.github.io/extensions-samples/libs/alloy-editor/assets/alloy-editor-ocean-min.css and https://contentful.github.io/extensions-samples/libs/alloy-editor/alloy-editor-all-min.js

Thanks in advance!

Best regards,
Denys

I've followed the guide to add alloyeditor as a WYSIWYG editor into Contentful and was able to add the extention to my contentful staging space. I copied the html page from the github repository along with the code but the editor does not seem to function as expected. Specifially when I make changes to the editor I am not seeing the Publish button change to "Publish Changes" so it does not seem to be recognizing the data I am adding to to the editor. Can anyone tell what is missing in the editor script or recommend another WYSIWYG editor? I'm using VueJS as a frontend.

Hi there 👋 ,

I've been reading up on customsing the Contentful UI via the Extensions SDK, and I installed the JSON Form Editor, and used it on a field in a content type just to test it out, but when I started to create content it didn't work as expected, and errored in the console (see screenshot below)

If my understanding of this example is correct, an individual should take this boilerplate and make their own extensions with their own schemas, but I thought I'd just highlight this potential issue in the boilerplate.

Thanks!

I build a custom WYSIWYG text editor with Froala and hooked it up into my Contentful space successfully. However, there is an insert image button in my editor that I want to use to retrieve assets from the media I have hosted on Contentful, as it functions in the built-in text module ("Insert Media") that Contentful provides:

Does Contentful have a way to insert the same functionality into outside custom extensions? I assume there is already code that exists for this purpose, since it is already a feature that exists.

Hi all, I tried installing MUX video uploader like I had done in the past through Contentful Marketplace but noticed it has been removed. I was able to install it using the directions listed on git but it seems like that version is not the same as the version installed through the marketplace.

Will MUX video uploader be returning to Contentful Marketplace?

Seems that latest changes are causing all Bynder objects to be broken:

However can still fetch the id and src from the field using the API.

If I remove the image and select a new one can see the thumbnail updating in contentful, but the attribute src is lost, I have access to a few new attributes (including thumbnails) but not the src one.

Thanks in advance

It would be great if the Markdown editor had something similar to shortcodes in WordPress. We want to enable our content editors to add formatted content inside the body of a blog post. For example, adding an image that has a caption in whatever order they want.

I know the markdown editor supports HTML, but our editors don't know HTML so they can't do that. Nor would we want them too.

Another use could be giving them an easy way to add abbreviations for better accessibility, for example, so they could enter something like
[abbriviation description="Thank God It's Friday"]TGIF[abbreviation]
and it would be parsed into the proper HTML markup.

Hi,

I attempted to create a custom field in Contentful using the bynder-assets extension which I installed through the marketplace (https://www.contentful.com/developers/marketplace/bynder-assets/).

Unfortunately I get the following error in console when I try to press the “Select images in Bynder” button:

Field.js:41
Uncaught (in promise)
{code: "Error", message: "no extension found", data: undefined}
code: "Error"
data: undefined
message: "no extension found"

I believe I entered a correct Bynder URL in the widget config form (“companyname.getbynder.com”), though I tried out variations as well.

Any tips on what is causing this and how to fix it?

Thanks in advance.

Thanks for putting this together to share some cool features! I got the Wisitia extension installed in my Contentful Space. However, I'm running into an issue displaying the embeds inside an iFrame.

the same video displays fine using the URL field type when I have the domain restriction enabled for contentful.com:

I reached out to Wistia support and they shared the following:

If Contentful is sandboxing those embeds inside an iFrame, it's going to prevent the use of Domain Restrictions in that environment. Sandboxing prevents our scripts from properly identifying the referrer URL - if you disable Domain Restrictions, do you see a missing fullscreen control on those embeds? That would be another symptom of sandboxing the embeds in this fashion (because iFrame elements need the allowfullscreen property for that control to be available - this is true for all iFrames around a given embed).

I disabled Domain Restrictions temporarily and this did not see a missing fullscreen control on those embeds.

Any suggestions on modifying the extension in order to work with Domain Restrictions?

Hello, Ive realized that I miss features like list in contentful

I was trying to create my own UI field extension using the steps given on Contentful documents below: https://www.contentful.com/developers/docs/extensibility/ui-extensions/managing-a-ui-extension/

For some reason my localhost:1234 server runs but nothing is loaded... The sdk's init function does not seem to fire due to which there is nothing getting added in the root div.

I also tried cloning the sample extension https://github.com/contentful/extensions/tree/master/samples/external-api This too does not load anything on localhost

Please help if anyone has successfully tried this before

I would like to have a large text area box similar to the Long Text field of Contentful. Alos, it would be great if we could have field to link a contentful asset to the form.