When modeling content, you frequently stumble upon specialized data types that go beyond (rich) text fields. A common example is color. Editors love to change the color of page components, but can you expect them to input Hex codes or RGB channel values? Is there a better way?
I have had many clients asking me how they can extend the Kentico Cloud interface. Typically they want to load external data with embedded videos and other media assets or enable editors with the same user experience as they currently have within their old systems. In the past, it was not possible to extend the Kentico Cloud interface nor to develop custom elements. URLs represented videos in text fields, and editors had to learn how to use our rich-text editor. But that has changed now—welcome custom elements!
Customizing the User Interface
Custom elements extensions are standalone web applications that are hosted somewhere on the internet. They are not implemented within Kentico Cloud but integrated into the UI using iframes. Therefore they can sit on a server far far away (preferably not too far though - latency still applies). Kentico Cloud only cares about the data. It will communicate with the component in the iframe, provide it with initialization data and listen for data changes to make sure they are persisted. The extension is in charge of the rest. The way it displays the data, processes them, transforms them and serves them back to Kentico Cloud is orchestrated within its implementation.
Do you want to build a color picker, product selector, markdown or image editor? Kentico Cloud does not limit you in your ideas as long as you provide JSON data that represents the current state of the component. It works both ways. Whenever a content item is opened, Kentico Cloud will provide your custom component with respective data. Your component then uses the data to display its UI.
That's cool, right? Imagine Kentico Cloud is an engine that you can now adjust, exchange its parts, make it run on electricity instead of gas, tune its performance and use it for building a car, truck or even an aircraft!
But not everyone likes to start on a green field. Whenever I need to use a component, I tend to search online for an existing one I can use. And I am usually successful, mainly thanks to the number of open-source projects and their contributors, which saved me a lot of time in the past.
Kentico loves open-source. We highly value every single person that contributes. Therefore, when we were implementing the custom elements interface, we wanted the community to be able to share component implementations. We wanted to enable developers to be creative instead of implementing the same data parsers, drop-downs, and other common functionality again and again. That's why we created a common space for all extensions on GitHub and added a few examples.
Contest and Prizes
We all like to play! To make it all more interesting, we have decided to spice up the game with a few Amazon vouchers. Do you want to get a new mouse and keyboard set, home stereo or a kitchen robot because, you know, it's at the top of your prioritized home backlog? Then check out how you can join the contest for a chance to win!
For your chance to win, all you need to do is submit an extension that:
- is in the form of a pull-request to https://github.com/Kentico/custom-element-samples between March 1 and March 31, 2019 (*UPDATE: contest deadline has been pushed to April 14th*)
- is functional
- is open-sourced under the MIT license
- does not violate any applicable license
Full terms and conditions of the contest can be found on the repo homepage.
If you haven't created a pull request yet, don't know what MIT license stands for, or you have any other questions, email email@example.com. We will happily explain the steps and help you get your extension registered for the contest.
At the end of March, we will evaluate every extension on their innovation and originality, usefulness, complexity and quality. The authors of the top 10 extensions will be rewarded with a $150 Amazon voucher. Winning authors who are non-US residents will be eligible to claim a virtual visa card to the same value. If you want to increase your chances of winning, you can implement multiple extensions. Each extension will be evaluated separately so you may end up with multiple rewards.
We will get in touch with winners using their GitHub contact info, so please double check that your profile is up-to-date.
Ideas for Extensions
If you have already worked with Kentico Cloud, you can probably easily think of many extensions that would come in handy. If not or you're looking for some inspiration, we've put together a list of ideas for extensions. Just drop us a comment in the issue before you start working on it, so that we can avoid having multiple people working on a single extension.
Preferably you may also include our CSS and font to achieve the same look and feel as Kentico Cloud has. They are publicly available on GitHub.
Then the development is fully in your hands. The extension is a regular nested web application, so you can use any tools you like to build it. The API lets you configure the communication and behavior, like setting the element height (CustomElement.setHeight(250)), sending the data back to Kentico Cloud (CustomElement.setValue('contest')) or configuring element's availability (CustomElement.onDisabledChanged(callback)). Take a look at the full API reference.
DevKit to Speed Up the Development
Extensions are standalone web applications and as such implement more or less sophisticated business logic. As we are using our sample extensions repository on GitHub also as a host (GitHub pages), we encourage Kentico Cloud users to reference them directly. That means users do not need to download an extension and host it on their own, but they can use the extension directly from GitHub. For that reason, we aim to keep the repo as simple as possible. All of the extensions stored there must be already compiled and minimized.
Custom element DevKit is a simple tool that automatically prepares your extension for publishing. It automatically compiles your implementation, stylesheets, and views into a 'build' folder which you can then directly push into our sample extensions repository. Check out how it works in detail here.
If you already have a build process configured, feel free to use it. However, if you are starting on a green field, this will speed up your development.
Ready. Set. Go!
Now you know everything. Take your original idea or pick one from the list and start coding. I know that the best way to learn is via example, so check out the markdown editor sample for reference. That will get you up-to-speed.
Let's see if you have what it takes to dominate the contest and seize the prize!