Color Picker App Installation Guide

To further enhance the business user experience, Contentstack provides prebuilt custom field apps that let you extend the functionality of your custom fields to serve your unique business needs while providing a native Contentstack look and feel.

With the Contentstack Color Picker app and Custom Fields, you can now select a color as an input. With the Color Picker custom field, you can select and adjust color values.

Par exemple :

• You can use the app for changing the color of the custom built web pages dynamically.
• In an eCommerce website, a set of colors can be used as a filter for products which can be stored in Contentstack CMS.

Prérequis :

• Compte Contentstack
• Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow this step-by-step guide to install and configure Color Picker within your stack.

Étapes pour l'exécution

1. Install and Configure Color Picker in Contentstack Marketplace
2. Use Color Picker within your Stack

1. Install and Configure Color Picker in Contentstack Marketplace

   Suivez les étapes pour installer l'application dans Contentstack.

   1. Log in to your Contentstack account.
   2. Dans le menu principal de gauche, cliquez sur l'icône Marketplace pour accéder à la Marketplace de Contentstack.
      
      
   3. Cliquez sur Applications dans le panneau de gauche.
   4. Dans le Marketplace, vous pouvez voir toutes les applications disponibles. Survolez le Color Picker (sélecteur de couleur) l'application et cliquez Install App (installer l'application).
      
   5. In the popup window, select the stack where you want to install the Color Picker app and click the Installer .
      
      
   6. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
   
   

   Note: No additional configuration is required to use the Color Picker app.

2. Use Color Picker within your Stack

   To use the Color Picker application within an entry of your stack, follow the steps given below:

   1. Se rendre à votre pile, cliquez sur l'icône Modèles de contenu dans le panneau de navigation de gauche, puis cliquez sur le bouton + Nouveau Type de contenu .
   2. Créer un type de contenu en ajoutant des détails pertinents comme indiqué ci-dessous :
      
      
   3. Dans la page Générateur de Type de juridique, ajoutez un champ Personnaliser dans votre type de contenu en cliquant sur le lien Insérer un champ représenté par un signe + .
   4. Sous Select Extension/App (sélectionner l'extension/application), sélectionner Color Picker (sélecteur de couleur), et cliquez sur le Proceed (continuer) .
      
      Color Picker is added in the custom field.
      
   5. After adding the app in a custom field, click Save or Save and Close to save your changes.
   6. To use the Color Picker app, create an entry for this content type. In the left navigation panel, navigate to the Entrées de contenu page, cliquez + Nouveau entrée pour créer une nouvelle entrée pour le type de contenu ci-dessus, puis cliquez sur Proceed (continuer).
      You will see the Color Picker custom field on your entry page as shown below:
      
   7. You can pick a color by dragging the cursor or providing the color codes.
      
      
   8. After setting the slider, Save and Publish your entry.