Color Picker | Classic

Color Picker custom field extension provides a native color picker polyfill that Contentstack users can use as a field within a content type.

This step-by-step guide explains how to create a Color Picker custom field extension for your content types.

  1. Add the “Color Picker” custom field extension to your stack

    1. Log in to your Contentstack account and go to your stack.
    2. Navigate to the “Settings” gear icon, and select Extensions.
    3. Click on the + Add Extensions button, and select Use prebuilt option. Alternatively, you can click on the prebuilt extension link displayed on the page (if you do not have any extensions in the stack).use prebuilt
    4. In the Prebuilt Extensions window, select Custom Field from the drop-down options, choose Color Picker, and click on color picker
    5. In the Create New Extension page, you will see the following options:
      • Title (required): You will see a predefined title, “Color Picker.” Use the same title to add the custom field in your content type.
      • Field data type (required): By default, the data type for the input data is set as “Text.”
      • Multiple (optional): Select this if your custom field accepts multiple values, and the data type is not JSON.
      • Hosting method (required): The hosting method is set to Hosted By Contentstack since it is a custom field hosted on Contentstack.
      • Extension Source Code (required): Here you will find the source code for the custom field. You can make changes to this code as per your requirements.
      • Config Parameters (optional): Provide values for the config parameters if you have used any in the source code.color picker config page
    6. Finally, Save this custom field.

    After saving the custom field, let’s learn how to start using this custom field in your content type.

  2. Use your custom field

    To use Color picker custom field in your content type, perform the following steps:

    1. Create a content type by adding relevant details. create content type box
    2. On the Content Type Builder page, add the Custom field to your content type.
    3. In the Edit Properties section, select Color Picker from the Select Extension dropdown menu, and configure other properties of your custom field. color picker in content type

      Note: You can provide specific instance-level configuration settings for your Custom Field extension by referring to the Config parameters section.

    4. After adding other fields to your content type, click on either Save or Save and Close button. This will create a content type.
    5. To use the Color Picker, create an entry for this content type, and you will see the this field on your entry page as shown below: output of color picker

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page