Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
contentful-ui-extensions-sdk
Advanced tools
The UI Extensions SDK allows you to customize and extend the functionality of Contentful Web Application's entry editor. The editor itself is a container for many "widgets" that enable editors to manipulate the content stored in content fields. Widgets' complexity varies. They can be simple user interface controls, such as a dropdown, or more complex micro web applications such as our Markdown editor. They are decoupled entities from field types, and can be reused (for example using a dropdown widget to edit number or text fields).
Previously, the Contentful Web Application only offered our core platform widgets as options to manipulate fields' content. Now, with the UI Extensions SDK it is possible to create custom widgets to further personalize your users' needs. Core widgets and custom widgets are both built on top of the same API, making them virtually identical in functionality with the main difference being that custom widgets are rendered inside a secure iframe. The next step in our roadmap is to open source our core widgets to make it even easier to build custom ones.
Every Contentful user has access to this feature, it is enabled by default, and all requirements to start using it are simply to follow the instructions contained here.
This SDK overview introduces you to the concept of custom widgets and lists concrete usage examples. The actual widget API documentation on the other hand gives you a more abstract and technical overview.
Conceptually, there are two main categories of custom widgets, for content editing and content management. Editing widgets reside on the main body of the entry editor and operate on top of a particular field or set of fields, while the management widgets perform actions on the entire entry.
Content editing widgets can operate on either single fields, or multiple fields.
Content editing widgets applied to single fields are great for circumstances where you just want to customize how you edit a particular field type. Examples of single field widgets are:
If you need more than a single field, you can try multi-field level widgets. Currently we have two approaches for this:
The first is a simple approach is to use a JSON object field type and construct any complex field type that is not provided out of the box by Contentful, along with its UI and logic. However, there is a tradeoff when using this approach. Data inside of a JSON field cannot be used to query or filter entries in our APIs.
This approach involves creating a single field custom widget that can use our CMA to perform operations on other fields within the entry. Examples of multi-field-level widgets are:
Content management widgets reside on the sidebar and allow for actions that include every element in the entry. These are better suited for tasks related to workflows, data-management, integrations, etc. Examples of entry-level widgets are:
The most convenient way to upload and manage widgets through our API is via the
contentful-widget
command line tool. You can install it with
npm install -g contentful-widget-cli
To work with the widget sdk library and the examples, clone this repo and install the dependencies:
git clone https://github.com/contentful/ui-extensions-sdk.git
cd ui-extensions-sdk
npm install
Including the compiled version of the widget client library is as simple as adding the following line to your application.
<script src="https://contentful.github.io/ui-extensions-sdk/cf-widget-api.js"></script>
If you want to learn how to write your own widgets and see them in action, checkout the documentation for the Rating Dropdown Widget. To get an overview over the API have a look at the reference documentation
As widgets are rendered inside an iframe, you will need to include the
cf-widget-api.css
library within your custom widget in order to use any of
Contentful's styles.
Download the CSS library here and include it in your widget
<link rel="stylesheet" type="text/css" href="cf-widget-api.css">
Futher information can be found in the styleguide.
This repo includes the following example widget implementations. Before you can
use them, you need to run npm install
in the repository root.
This example is a basic widget meant to help you get started with custom widgets development. Uses a dropdown to change the value of a number field and makes some CMA requests.
This example integrates the Alloy rich-text/HTML editor to edit “Text” fields. Great to personalize the entry editor and enable HTML editing as an alternative to Markdown.
This example will automatically generate its values from an entries title field. For example typing “Hello World” into the title field will set the widgets input field to “hello-world”. It will also check the uniquness of the slug across a customizable list of content types. It highlights how the widget API can be used to inspect any value of an entry and react to changes.
This example provides a JSON formatter and validator based on the Codemirror library. It should be used with fields with the type “Object”.
This example integrates the JSON Editor library to display an edit form based on a predefined JSON Schema. Form input gets stored as a JSON object.
This example translates text from the default locale to other locales in a space using the Yandex translation API.
The example widget loads videos from a project on wistia into the Contentful Web Application. A video can be easily previewed, selected and then stored as part of your content. In this example widget we store the video embed URL in Contentful so the video can be embedded easily.
This example extracts the video id from a valid YouTube URI. Useful as a simple way to integrate with 3rd party media services.
This example displays a chessboard and stores the board position as a JSON object. You can drag pieces on the chessboard and the position data will be updated automatically. The widget also supports collaborative editing. If two editors open the same entry moves will be synced between them. It highlights the flexibility and potential of solutions that can be built using the UI Extensions SDK.
Technical feedback can be provided directly through the Github repo. However, if at any point some confidential or business sensitive information needs to be discussed, then the conversation should be handled via our formal support channels.
FAQs
A JavaScript library to develop custom apps for Contentful
The npm package contentful-ui-extensions-sdk receives a total of 6,191 weekly downloads. As such, contentful-ui-extensions-sdk popularity was classified as popular.
We found that contentful-ui-extensions-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.