Developer Tools App Installation Guide

The Contentstack Developer Tools app provides code snippets and a JSON preview of the entry response of the current entry in use. The Sidebar Widget contains the API Details tab and JSON View tab.

In the API Details tab, you can select the platform or language to get the SDK code snippet of the current entry. You can also find the code snippets for all entries belonging to the particular content type.

The JSON View tab helps you visualize the JSON response of the current entry.

Contentstack Marketplace lets you install the Developer Tools application and use it within an entry or all your entries of a content type to access the developer tools quickly.

Prerequisites

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

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

Steps for Execution

1. Install and Configure Developer Tools in Contentstack Marketplace
2. Use Developer Tools within your Stack

1. Install and Configure Developer Tools in Contentstack Marketplace

   Follow the steps to install the application in Contentstack.

   1. Log in to your Contentstack account.
   2. In the left navigation panel, click the Marketplace icon to go to the Marketplace.
      
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the Developer Tools app and click the Install App button.
   
   5. In the popup window, select the stack where you want to install the Developer Tools app and click the Install button.
      
   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 Developer Tools app.

2. Use Developer Tools within your Stack

   You can use Developer Tools for your existing content types and entries. Use the following steps to create a new content type and entry to use the Developer Tools app.

   Steps to use the Developer Tools app in a Contentstack entry:

   1. Go to your stack, and click the Content Models icon in the left navigation panel.
   2. Click the + New Content Type button to create a new content type.
   3. Add relevant details and click the Save and proceed button.
   
   4. Click the Insert a field link represented by a + sign to add a Single Line Textbox field.
   5. Enter the required details for the textbox.
   
   6. Click the Insert a field link represented by a + sign to add a Multi Line Textbox field.
   7. Enter the required details for the textbox.
   
   8. Click Save or Save and Close to save your changes.
   
   9. In the left navigation panel, navigate to the Entries page and click + New Entry to create a new entry for the above content type. And then click Proceed.

   You will see the fields on your entry page as shown below:

   
   10. Enter the required details in the entry and then click the Save button.
   11. In the right navigation panel, select Widgets, and then select Developer Tools.
   

   You will see the following two tabs in this section:

   • API Details
   • JSON View
   12. Click the API Details tab to view the SDK code snippet(s) that you can use to access or fetch for the current entry or all entries of the content type in the SDK platform of your choice.
   
   13. Click the Select Platform dropdown to select a programming language of your choice.
   14. Click the copy icon in the Get this Entry section to copy the code sample of the current entry in the platform you chose in the previous step.
   
   15. Click the copy icon in the Get all Entries section to copy the code for all the entries of the content type in the platform you chose in the previous step.
   
   16. Click the JSON View tab to view the code of the current entry in JSON format.
   17. Click the copy icon to copy the JSON code of the current entry. 
   

   Additional features in the Developer Tools App:

   • App Settings icon: Modify the environment in settings for the code snippets. The code samples in the API Details are updated based on the environment selected in the Environments dropdown.
   • Fullscreen icon: View the Developer Tools app in full screen.