App walkthrough
#Overview
Welcome to our Hygraph app walkthrough. This document will show you the entire app.
We'll go over each section and discuss what you can do in them.
At the end of the document you'll find a special section listing & describing actions and where they are located in the app.
#Dashboard
The Dashboard is the section of a project you land on when you first create it, and every time you access it after that.
It contains useful information such as project statistics, contact links to schedule a demo with our team, videos on some of our features, documentation & example links, and in-app documentation on connecting your frontend.
It also displays the quick start checklist, which will guide you through the process of setting up your first project.
#Onboarding checklist
Quick start checklist in project dashboard
The quick start checklist, initially located on the lower right corner of the screen of your project, is designed to onboard you into using Hygraph.
The checklist will take you through your first steps in the Hygraph app, from creating a project, to enabling API access to share your content with others.
Quick start checklist closeup
It contains a progression line, so you can follow how far along you are in the process, the steps, with a brief description of each one, and a button that links you to the place in the app where each step will be carried out. As you move forward, completed steps will be ticked off and the following one will display.
Quick start checklist collapsed view
You can use the chevron button on top of the progression line to collapse the list for a more minimal view, then click on it again to fully display it. The collapsed view shows only the checklist progression bar, and a line for the next step.
Quick start card in project dashboard
If you close the checklist using the X button, a card will display at the top of the dashboard. The card shows the same progression line, as well as a link to reopen the checklist, in case you wish you have it displayed again.
The steps:
- Create a project: Given that you will only see the checklist when you first access your project dashboard, the Create a project step will be ticked off already.
- Set up your schema: The second step on the checklist suggests creating the minimal content necessary for a functional schema, that is, one model containing one field. Both of these actions are covered in our getting started tutorial: you will find information on creating your first models and adding field to them in our Getting Started tutorial.
- Create content: The third step on the checklist suggests creating content using our intuitive Content editor. These actions are covered in our getting started tutorial under content creation and content publishing.
- Explore your content API: The fourth step takes you to our API Playground, where you can fetch content using GraphQL. Use of the API Playground is covered in our getting started tutorial, in our queries and mutations practice.
- Make your API accessible: The final step on the checklist takes you the API Access section of your Project settings, where you can enable access to your API. This is covered in getting started tutorial, in the connect storefront lesson.
#Schema builder
Your schema is defined by the models you create, and fields you add. It is the backbone of your Hygraph project. In the Schema builder you'll define the structure of your content by adding fields, creating relationships between models, and much more.
#Content editor
The Content editor is where you create, edit, publish and unpublish content using the structure of the schema you previously created.
The Content editor presents default and custom views for you to access your project's contents. It also allows the possibility of reloading your content, previewing it in the API Playground, or viewing the model.
#Assets manager
The Digital asset manager - or Assets - is where you upload and store documents to be used in your content entries.
The Assets tab presents default and custom views for you to access your uploaded assets.
#API Playground
You can use the API Playground to test out API calls, by experimenting with querying and mutating data.
#Mutations
Look into mutating data in our API Playground.
#Endpoints
Find your endpoints in the UI by navigating to your project settings.
#Other features
| Feature | Description |
|---|---|
| Notifications | The Notifications section informs you of comments assigned to you in content entries. If you have unread comments, a red mark will appear on the bell icon. This section picks up notifications from all your Hygraph projects. |
| Apps | The Apps section is where you can configure or uninstall apps from your project. Each installed app will display in a card, where you will have the option of editing its configuration by clicking on the pencil icon, or uninstalling it by clicking on the trash icon. The configuration options depend on the app, they are the ones you initially set up during installation. You can also find a link to our Marketplace at the top, where you can browse the apps you can install. |
| Webhooks | In the Webhooks section, you can add webhooks to your project's deployment according to triggers you can configure. This section displays each webhook in a card, with options to edit its configuration, view its logs, and delete it. |
| Project settings | This is where you can access your project's global information, and manage its settings. This screen contains both, general and access settings. |
Apps & Webhooks are environment specific. This means their configuration is applied per environment. Take this into consideration if you're working with a project using more than one environment.
#Where do I...?
| Action | Where in Hygraph | Description |
|---|---|---|
| Create a model | Schema Builder | Your schema is the content structure of your project. You can define your schema by creating models and adding fields to them. |
| Add fields to my model | Schema Builder | You can add fields to your models to define your project schema. |
| Customize my sidebar | Schema Builder | You can configure schema sidebar adding and/or removing system and custom widgets. |
| Add components | Schema Builder | You can create components to use them as flexible, reusable templates where you define the fields once - in the Schema - and then fill them with different content every time you use the component in a content entry. |
| Add remote sources | Schema Builder | You can use remote sources to add content from other systems and sources to the Hygraph API without having to migrate the content itself. |
| Add enumerations | Schema Builder | You can use enumerations to group values within a type, or to create a list of values, which can then be used when adding a dropdown field to your models. |
| Schedule publishing | Content Editor | You can schedule content publishing, and unpublishing as single entries, or group them as part of a release. |
| Create content | Content Editor | You can create content entries based on the models you created in your schema. |
| Publish content | Content Editor | You can publish content so it can be consumed by others. |
| Update content | Content Editor | You can update content you've already created, whether it's been published or not. |
| Duplicate content | Content Editor | You can easily duplicate content, which saves time during content creation of similar entries. |
| Delete content | Content Editor | You can delete content entries individually or in bulk, and you can also delete related content. |
| Access created content | Content Editor | You can navigate to the content editor to access your content. This experience can be customized. |
| Add an asset entry | Digital Assets Manager | You can upload assets and add metadata to them, providing you've added metadata fields to the Assets model. |
| Upload assets | Digital Assets Manager | You can quickly upload assets from different sources into the CMS. |
| Work with assets | Digital Assets Manager | You can work with your assets table in a similar way as you would with content entries in the Content editor. |
| Manage notifications | Notifications | You can use our commenting feature to manage notifications and work collaboratively with your team. |
| Install integrated apps | Apps | You can install apps from our Marketplace in your Hygraph project to enhance its capabilities. |
| Configure webhooks | Webhooks | You can configure webhooks to trigger actions in your project. |
| Manage my project's global information | Project settings | You can access your project settings to edit your project details, clone your project, enable public cloning and even delete your project. |
| Clone my project | Project settings | You can create a copy of your project's master environment by cloning it. |
| Delete my project | Project settings | You can delete your project from project settings. |
| Share my project | Project settings | You can enable public cloning to share a link that other people can use to clone your project. |
| Manage my project environments | Project settings | You can use different environments to safely work on isolated instances of your project. |
| Manage audit logs | Project settings | You can access audit logs to see all changes inside of your project. They contain both changes in the schema and content. |
| Manage my project's content stages | Project settings | You can manage your content stages to create custom workflows. |
| Manage my project's locales | Project settings | You can add locales to include content in different languages. |
| Manage your billing information | Project settings | You can update your billing information by accessing your project settings. |
| Manage custom UI extensions | Project settings | You can use UI extensions to replace default components in the content editor with custom solutions. |
| Manage API access | Project settings | You can manage API access from your project settings. Manage your endpoints, public content API permissions, and permanent auth tokens. |
| Manage roles and permissions | Project settings | You can manage roles and permissions to create efficient workflows and build independent teams. |
| Manage team members | Project settings | You can add members to your Hygraph project and overview the roles they have been assigned to. |