Content Type Visualizer App Installation Guide

The Content Type Visualizer Dashboard app provides a visual representation of all Contentstack content types and their fields within a particular stack, similar to an ER diagram.

Contentstack Marketplace allows you to easily install the Content Type Visualizer application and use it within your stack to get a diagrammatic view of all the content types in the given stack, along with the references relationship between the content types.

Note: The Content Type Visualizer app can support up to 300 content types in the Dashboard.

Prerequisites


This step-by-step guide explains how to install and configure the Content Type Visualizer app within your stack.

Steps for Execution

  1. Install Content Type Visualizer in Contentstack Marketplace
  2. Use Content Type Visualizer within your Stack
  1. Install Content Type Visualizer in Contentstack Marketplace

    Follow the steps given below to install the application in Contentstack.

    1. Log in to your Contentstack account.
    2. On the left-hand side of primary navigation, you will find the icon for Marketplace (as shown below). Click the icon to go to the Marketplace. 
    3. CT_Visualizer_-_Marketplace_Icon.png
    4. Within the Marketplace, you can see all the available apps; hover over the Content Type Visualizer app and click the Install App button.
    5. CT_Visualizer_-_Install_App.png
    6. In the popup window, select the stack where you want the Content Type Visualizer app installed and click the Install button.
    7. CT_Visualizer_-_Select_Stack.png
    8. Click the Stacks icon from the left navigation panel. 
    9. CT_Visualizer_-_Stack_Icon.png
    10. Click the required stack to start using the Content Type Visualizer application.
    11. Note: No additional configuration is required to use the Content Type Visualizer app.

  2. Use Content Type Visualizer within your Stack

    To use the Content Type Visualizer app within an entry of your stack, follow the steps given below:

    1. Click the Dashboard option of the stack.
    2. You will see the Content Type Visualizer app here. 

      CT_Visualizer_-_Dashboard_View.png

      In the diagram above, the content types relate to one another through references.

      Note: One node references another node through the reference field.

      Reference-Gif.gif

      1:1 Relationship

      In a 1:1 relationship, one content type references itself or another content type. In the example given below, CT5 references CT1 by 1:1 relation. 

      CT_Visualizer_1-to-1_Edit_in_Card.png

      Reference field in the content type editor page: 

      CT_Visualizer_1-to-1_Edit_Ref.pngCT_Visualizer_Select_CT1.png

      1:M Relationship

      In a 1:M relationship, one content type references many content types. In the example given below, CT1 references CT2 and CT4 by 1:M relation. 

      CT_Visualizer_1-to-M_Edit_in_Card.png

      Reference field in the content type editor page: 

      CT_Visualizer_1-to-M_Edit_Ref.pngCT_Visualizer_Select_CT2_CT4.png
    3. Click the + (zoom in) or - (zoom out) icons to zoom in or zoom out of the diagram. 
    4. CT_Visualizer_Zoom.png
    5. To view the information of a specific content type in the diagram, follow the steps below:
      1. Click a content type card.
      2. Note: If a content type card is already selected, then click the Content Type Information icon in the right panel to view the information of the selected content type.

        CT_Visualizer_CT_Information.png

        The Content Type Information panel displays Name and Field Count of the selected content type, by default. If the selected content type has entries and/or reference fields, then the Number of Entries (master) field and the Referenced Content Type(s) field will be displayed.

      3. Click the icon below the Number of Entries (master) field to view the entries associated with the selected content type, in a new tab. 
      4. CT_Visualizer_No_of_Entries.png
      5. Click the Edit Content Type button to edit the content type in the app. 
      6. CT_Visualizer_Edit_in_CT_Info.png

        Alternatively, click the Edit icon in the content type card to edit it. 

        CT_Visualizer_Edit_in_Card.png
      7. Click the Referenced Content Type(s) dropdown to view the referenced content types of the selected content type. 
      8. CT_Visualizer_Referenced_CT_Info.png
    6. To view the code of a specific content type in the diagram, follow the steps below:
      1. Click a content type card.
      2. Click the JSON View icon in the right panel. 
      3. CT_Visualizer_CT_JSON_View.png

        You can see the selected content type under the Content Type section and its code view under the JSON section. 

      4. Click the Copy icon to copy the JSON code.
      5. CT_Visualizer_CT_JSON_Copy_Code.png
      6. To view the code of a different content type, select the required content type from the dropdown under Content Type
      7. CT_Visualizer_CT_JSON_Dropdown.png
    7. Click the recenter icon to bring the view to its initial state. 
    8. CT_Visualizer_Recenter.png
    9. Click the Fullscreen icon to view the content types in full screen.
    10. CT_Visualizer_Full_Screen_Icon.pngCT_Visualizer_Full_Screen_Reset_Icon.png

      Note: All operations which can be done in the normal screen mode can also be done in the full screen mode.

    11. Click the Reload button to reload the content types in the Dashboard.
    12. CT_Visualizer_Reload.png

      The count label displays the number of content types in the stack.

      CT_Visualizer_Count_Label.png

Was this article helpful?

Thanks for your feedbackSmile-icon

More articles in "Analytics"

On This Page

^