CSV/XLSX

You can add a CSV/XLSX custom field extension to your stack that allows you to fetch content from a CSV or an XLSX file and displays it into a field in your content type. Subsequently, while creating entries, you can have a CSV or an XLSX file imported as the input value for the field.

This step-by-step guide explains how to create a CSV/XLSX custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Add the CSV/XLSX custom field extension to your stack
  2. Use your custom field

Prerequisites

Add the CSV/XLSX Custom Field Extension to your Stack

  1. Go to your stack, navigate to the Settings gear icon, and select Extensions.
  2. On the Extensions page, click on the + Add Extension button and then on Create new as shown below. Alternatively, you can click on the Create a new one link.

    Create extension.png

  3. On the Select Extension Type screen, select Custom Field.

    Select custom.png

  4. On the Create New Extension page, enter details in the fields as given below:
    1. Title: Provide a suitable title. For example, CSV.
    2. Field data type: Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case.
    3. Multiple: Keep this unchecked.
    4. Hosting method: The hosting method will be set to "Hosted By Contentstack." This option allows the source code for the custom field to be displayed in the "Extension Source Code" field.
    5. Extension Source Code: In this field, you need to enter the extension code. To get the code, contact our support team at support@contentstack.com.

      Once it is downloaded, copy the code from the index.html file located in the root folder and paste it in the "Extension source code" field.
    6. Config Parameter: Enter the following configuration details as the extension's config parameter:
      {
          "columns_limit": ,
          "rows_limit": 
      }
      The integer value that you enter in the above config will put a limit to the number of rows and columns that the imported file will display.

  5. Click on Save. This creates your custom field.

Now, let's understand how you can start using this custom field in your content type.

Use Your Custom Field

To use your custom field, you need to perform the following steps:

  1. Create a content type by navigating to the CONTENT tab, and clicking on+ New Content Type. Provide a suitable name to your content type, an optional description, and then click on Create and Add fields.

    Content type creation.png

    This leads you to the Content Type Builder page where you can add the relevant fields.

  2. Add the Custom field in your content type. Provide a name to it, for example, CSV, and add other fields such as a single-line text box, and so on.

    Add custom field.png

  3. In the Edit Properties pane on the right-hand side, select the custom field from the drop-down (that is, CSV) and set the other properties of your custom field.

    Properties pane.png

  4. After adding other relevant fields in your content type, click on Save and Close. This will create your content type. 
  5. Now open the content type and create an entry as usual. You will see the CSV/XLSX extension field in your entry as shown below:

    Entry page.png

  6. Click on the CSV/XLSX File to Import button. It will then ask you to choose the CSV or the XLSX file and import it to your field. Once you add your file, this is how it appears in your entry:

    Entry with data.png

  7. You can add or delete rows by clicking on the + or the "trash" icon respectively.

Note: The max file size that can be imported in the field extension is 10 KB. Refer to our Extension Limitation doc for more details.

On This Page

top-arrow