Hygraph Search Bar & Menus

How to use the search bar, info panel and comments section in Hygraph

Search

Across the various Hygraph pages you will encounter a search bar atop most list overview pages, with which you have multiple options at your disposal.

Locale

Using the ‘Locale’ drop-down selection, you may specify to display content relevant only for a specific subset of locales, you may select as many as needed.

However, keep in mind that while default is selected, the list will not change. Here is an example of a DACH region locale selection.

Search term

The search field uses dynamic searching; each character entered in the search field will further refine the displayed content. While the system is carrying out each search, a blue loading progress bar will be visible on the very top of the webpage, only when this bar disappears will the displayed list reflect the searched term.

Filters

The displayed list can be further refined by applying one, or multiple filters. Click the Filter button to display a searchable drop-down menu where many filter predicates can be selected.

Once a filter predicate has been selected you must then specify the value you wish to filter with for the selected predicate.

Tenant Filter

It is important to be aware that in Hygraph you are viewing content from multiple tenants at the same time. Therefore, it’s a good idea to add a filter on the tenant, which will then only display content for the tenant that you are working on.

Click the filter button next to the search bar and select the Tenant option

And then from the drop-down selection field that appears once the tenant filter option has been toggled, select the relevant tenant for which you want to edit content in. You may choose multiple.

Stages

In Hygraph all content has one of the following three stage

Draft

When content is first created it will have the Draft state and will not be visible on the tenant’s website.

Published - Green

Once content is published, it enters the green published state and will become visible on the tenant’s website.

Published - Blue

If after being published the content is changed, it will enter the blue published state, indicating the latest changes have not be published, and only the earlier published content will be visible on the tenant’s website.

Info

With content selected, on the right side of the screen there is and menu pane.

The first section of this pane contains general information, most notably Localizations and versions.

Entry Information

Here the ID, Created and last updated date is displayed.

ID is a unique identifier for the object within Hygraph, not to be confused with the object Key, which is generated from the creation of the object in CommerceTools.

Schedule

If the object is included in a scheduled release, for instance, if it is part of a campaign, or product launch, information pertaining to the release will be displayed in the schedule section.

By clicking the three dots, you may edit, or remove the schedule event.

If no such event exists this will also be specified.

Using the + Add button, you can create a schedule event.

Stages

Here the latest stages will be displayed, and if there is unpublished content, this will be specified in this section.

Localizations

This is a very important part of this menu pane, it determines which locale fields are visible, namely for every locale there is a corresponding field in each component contained in the selected object.

When a locale is toggeled to be visible, it’s fields will be visible in the components of the object in the edit screen.

Where as when it is toggled to not be visible, it’s corresponding fields will not shown on the edit page of the selected object.

Adding Locales

Locales which have not been created for the selected object, are displayed greyed out. By clicking the + icon they can be added.

By clicking the trash icon previously created locales can be deleted, this will trigger a prompt informing the user all the fields from that localization will be deleted.

Versions

Hygraph keeps track of stage progressions which can be reviewed via the version section in this pane.

By selecting a listed version, a comparison screen will be displayed where all the fields from both versions are visible, and then which specific changes were made between the two versions.

There are two options that can be configured on this screen:

• Locales: Enabling or disabling locales will show or hide them in comparison screen.
• show edits only (x): toggle the slider to hide fields that were not changed between the two versions being compared.

Preview

A live preview must be configured per object in each environment, If it has previously been configured, it will appear in this pane as follows:

Otherwise, it must first be configured, and the section will appear like this:

By clicking the ‘Configure Live Preview here’s a configuration pane will appear where a name and URL can be set for the preview.

As well as being able to toggle whether the preview opens in a new tab.

Comments

If any comments have been made, they will be displayed in this section

You can assign comments to other Hygraph users. It is, however, best practice to contact VHC employees via slack, teams and otherwise email them via the VHC email domain. These are all preferred communication methods you should use instead of Hygraph commenting.