Content pages: ideas, tips & resources

Patrick Smith Updated by Patrick Smith

Opendatasoft pages allow the creation and integration of a variety of content. Although page templates are available for use, which makes the process of creating a new page content not only easier but also faster (see Using page templates), it definitely is a possibility to create a content page from scratch. There are indeed various possible integrations that can be done, and Opendatasoft also offers many resources that can be used as guidelines.

This documentation aims at listing ideas and pieces of advice concerning content pages, as well as links to other useful Opendatasoft resources.

Content integrations

The main integration to think of when creating a content page is that of widgets. Opendatasoft widgets are components, available as HTML elements, that can be combined together to build interactive content pages. All widgets are documented in the Opendatasoft Widgets documentation.

Some of the best-known widgets, and most useful when creating a content page, are the visualization ones. Each Opendatasoft dataset is available through several visualizations that can all be embedded in a content page (see Sharing and embedding data visualizations).

A few widgets are available in the User Guide instead of the Widgets documentation. Contrary to all other widgets, they cannot be used outside the Opendatasoft environment. See below.

Third-party content, that is, integrations with elements that are not of the Opendatasoft environment, can also be integrated in a content page, as long as they are available as a pastable HTML piece of code.

Due to security concerns, JavaScript and arbitrary iframes not part of Opendatasoft context are not allowed in Opendatasoft pages. Third-party embeds in JavaScript are therefore not supported.

Content creation resources

The user guide is not meant to provide more information about content pages than what is already documented in this Creating content section. However, there are other Opendatasoft resources entirely about the content pages topic.

  • The Code Library : A collection of content page templates, components and widgets tips and tricks that can be copied and pasted in a page,
  • ODS Academy : The Opendatasoft e-learning platform with step-by-step courses, for example to learn how to create a Data story,
  • Getting started with the widgets : A first introduction to the widgets and the main concepts around them.

Contact form and pages widgets

The following two widgets cannot be used outside the Opendatasoft environment, and are explained here rather than in the Widgets documentation.

Contact form

This widget inserts a form that users can use to contact the domain's administrators. It uses reCaptcha to make sure anonymous users cannot spam the administrators.

You can customize the recipients of the contact form. Here is the article that'll help you to do so.

Parameter

Type

Description

form-disabled

boolean (default: false)

Specify whether to disable (that is prevent data input and submission) the contact form or not.

logged-in

boolean (default: autodetected)

Specify whether the current user is logged in or not. If true, the recaptcha is not displayed.

name-label

string (default: )

Specify the label displayed in front of the name field.

email-label

string (default: )

Specify the label displayed in front of the email field.

message-label

string (default: )

Specify the label displayed in front of the message field.

additional-fields

Array of field objects

(default: )

Specify a list of fields to be inserted between the and the inputs.

Each field must contain the following properties

  • id: unique lowercase string without special characters
  • label: unique string
  • name: unique lowercase string without special characters
  • type: one of 'text' or 'choice'
  • choices: to be set if type is 'choice' only. Array of unique strings.
  • required: boolean
Full example
<ods-page-contact-form name-label="Your name"
                       email-label="Email address"
                       message-label="Your message"
                       additional-fields="[
                                            {
                                              id: 'subject',
                                              name: 'subject',
                                              label: 'Subject',
                                              type: 'text',
                                              required: true,
                                            },
                                            {
                                              id: 'category',
                                              name: 'category',
                                              label: 'Category',
                                              type: 'choice',
                                              choices: [
                                                'Question about my account',
                                                'Question about a dataset',
                                                'Request for new dataset'
                                              ],
                                              required: true,
                                            }
                                         ]"></ods-page-contact-form>

Pages list

These two widgets list all the portal's content pages. While the first one only provides an iterator, leaving to you the actual display of the list, the second one generate a list containing a link to the page alongside the page description.

  • odsPageEnumerator
    Usage
    <ods-page-enumerator>
        <a href="{{ page.slug }}">{{ page.title.en || page.slug }}</a> - {{ page.description }}
    </ods-page-enumerator>
    Result
  • odsPagesList
    Usage
    <ods-pages-list></ods-pages-list>
    Result

How did we do?

Creating a page with the Code editor

How to insert internal links on a page or create a table of contents

Table of Contents

Contact

Powered by HelpDocs (opens in a new tab)