Skip to main content

Channel Posting Requirements Form UX Improvements

As per client feedback, we have improved the UX while filling in channel specific contract fields so that long forms seem less cluttered.


By default optional requirements are now hidden: we added "hide/show optional fields" button on the right side of the heading posting requirement fields (originally called STATISCH per HAPI Backend Job Post Implementation Guide) to be able to show and hide fields that are not required.


HAPI backend normally does not have such "grouping" feature to break posting requirements down into sections. Backend sends an array of posting requirements (which also includes the STATISCH type) with a sort value. On the frontend, we utilize the STATISCH fields as "section dividers" as such:

  • Example Heading 1 with sort value 10
  • Some input field with sort value 20
  • Some other input field with sort value 30
  • Example Heading 2 with sort value 40
  • An input field that belongs to second section with sort value 50

We splice the posting requirements array by start and end indexes based on the current heading and the next heading so that we can split into groups as such:

const groups: Record<string, string[]> = {
    "Example Heading 1": [
        "Some input field",
        "Some other input field"
    ],
    "Example Heading 2": [
        "An input field that belongs to second section"
    ]
}

If there is no "next heading", then we use the end index as 99999999999999999999999999999999999999999999 so the posting requirements after the last heading are also grouped.


If channel does not have any heading (STATISCH) posting requirement, we add a virtual posting requirement on the frontend to be able to show the "show/hide" button; then all posting requirements (because there is no section to divide into sub-sections) belong to this virtual heading we add.

i18n additions​

As part of this change, a couple of i18n messages have been added:


Key"en" value"de" value"nl" value
campaign.contract-posting-requirements.some-section-fields-are-optional-and-hiddenSome of the posting requirements of this section are optional and hidden!Einige der Veröffentlichungsanforderungen dieses Abschnitts sind optional und ausgeblendet!Sommige van de vereisten voor plaatsing in dit gedeelte zijn optioneel en verborgen!
common.hide-optional-fieldsHide optional fieldsOptionale Felder ausblendenVerberg optionele velden
common.show-optional-fieldsShow optional fieldsOptionale Felder anzeigenToon optionele velden
common.toggle-all-optional-fieldsShow/hide all optional fieldsAlle optionalen Felder ein-/ausblendenToon/verberg alle optionele velden

HTML Selector additions​

The button to toggle visibility of optional fields have an ID that:

  • starts with campaign-create-form-posting-requirements-toggle-visibility-optional-fields-button
  • ends with __elements_virtual_requirement

The ID changes each time user refreshes as we attach a unique ID to Elements, so a full example of an ID becomes:

  • campaign-create-form-posting-requirements-toggle-visibility-optional-fields-button-4e022ce2-5b95-49bb-bfeb-3a6da4b6a936-__elements_virtual_requirement.

There is also a button to show/hide all optional fields with a single click. THE ID ofr that button is campaign-create-form-posting-requirements-toggle-visibility-all-optional-fields-button