Editing content directly from your app

Content contributors sometimes need to fix minor errors or typos right away when they see them on your website or app. You can add an Edit button to the preview environment of your application, which redirects users straight to the particular item or even element in Kentico Cloud.

Table of contents

    This way, your editors don't have to spend time looking for the right content in Kentico Cloud. This approach is similar to Setting up content preview, just in the opposite direction: Instead of navigation from Kentico Cloud to a preview of the item, you navigate from content inside the preview to the corresponding content item in Kentico Cloud.

    Using smart links

    To navigate to a specific item in Kentico Cloud, construct a link with the following structure:

    https://app.kenticocloud.com/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>

    To navigate to a specific content element in Kentico Cloud, add the element's codename to the link:

    https://app.kenticocloud.com/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>/element/<ELEMENT_CODENAME>

    We check if your user role has access to the specified content item.

    Navigating to nested elements

    You can also link to an item nested in a Linked items or Rich text element in another item. The structure of the relationship will be reflected in the breadcrumbs inside the app for easy navigation.

    For example, a link like this

    https://app.kenticocloud.com/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ON_ROASTS_ITEM_ID>/element/related_articles/ item/<ORIGINS_OF_ARABICA_BOURBON_ITEM_ID/element/body_copy

    will send you to the following screen:

    Note: Currently, you can't directly access elements nested in content components. You can only link to the highest-level Rich text element in which the component is nested.

    Simple example

    Below is a simple TypeScript application which uses the TypeScript Delivery SDK to retrieve a specific content item. Then, it uses the item.system.id and item.system.language metadata properties of the item to display an Edit link for it.

    Note: In most cases, you want to display the edit links only in a preview environment that only your editors can access. But you can also use them in production – it's up to you to limit their visibility according to your needs.

    Advanced example

    Have a look at a more complex example of an Edit button in our .NET Sample application. The application uses helper methods in our Content Management SDK to construct the edit links more easily.

    What's next?