Protobi

← All help posts

View post

You can customize the headlines, titles, footnotes and formats for any element.

The most direct way to edit the headline, title, display key or footnote is to press on them, and when they turn editable, type in them directly.

## More properties dialog...

Another way to edit these properties is to press the edit icon and select "[More properties](/edit-access/element-properties)". This will bring up a dialog in which you can edit directly:

## Edit JSON dialog

Another approach is to edit the properties directly in JSON.  Here's a quick cheat sheet to common properties:

#### `displayKey`

Specifies a different string to display in the element's header. This might be handy if the survey define a column with key **s0** but you would prefer the user to see **Specialty** instead. In this case you might have:

```json
{
   "key": "s0",
   "displayKey": "Specialty"
}
```

#### `headline`

Bold text that appears below the element header. The headline for an element is the key takeaway that is representative of the chart. Many elements may not need a headline.

```
"headline": "Majority of respondents would say they are pretty happy"
```

#### `title`

Longer text that appears below the headline. For instance, the element **specialty** might have the title "Doctor, what is your primary specialty?"

```
"title": "Q.1 Generally, how would you say things are these days in your life
- would you say that you are very happy, pretty happy, or not too happy?"
```

#### `showHtml`

If title text includes HTML (e.g. images, bold/italic, etc), `showHTML` will allow the text to be shown with:

```
"showHtml": "true"
```

#### `footnote`

Text that appears at the bottom of the element as gray and italicized. It's useful for permanent notes related to the element, such as applied skip patterns and whether missing values are shown.

```
"footnote": "all respondents"
```

#### `color` [heritable](#heritable-properties)

The color of the element icon. It may be any CSS named color (e.g. `"color": "gold"`) or hexadecimal color code (e.g.`"color": "#FA0"`)

#### `colors` [heritable](#heritable-properties)

The colors of the chart. (e.g. stack chart) It may be any CSS named color (e.g. `"color": "gold"`) or hexadecimal color code (e.g.`"color": "#FA0"`)

#### `format` [heritable](#heritable-properties) < object >

Translates raw values to human-readable strings for display. Underlying value is unchanged. Formats are directly comparable to SPSS value labels. Formats are specified as JavaScript objects with the raw value as the key and the formatted string as the value, e.g.

```
"format": {
       "AD": "Andora",
       "AI": "Anguila",
       "AG": "Antigua",
       "AR": "Argentina",
      ...
   }
```

If no format is defined, then all raw values that appear in the data are displayed directly in the distribution. If a format is defined, then all formatted values appear in the distribution, whether or not they have data values. Values that exist in the data but are not defined in the format will appear under "Other".

You can toggle formatted value vs. raw value using the `Format` button.

#### `display`

Valid Values are: ("independent"|"compact"|"checkbox")

-   "independent"
-   "compact"
-   "checkbox"

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone