Filter the campaign list by campaign name
Filter the campaign list by campaign name
The Campaign Filters widget (he-campaign-filters) is now implemented. The
Campaign Landing widget (he-campaign) shows it as a Campaign Filters
accordion above the list, with a Campaign Name field and an Apply
Filters button.
Typing a name and pressing Apply Filters reloads the list from the first page with only the campaigns whose name matches, and closes the accordion. Clearing the field and applying again brings the full list back.
Matching
Matching is case-insensitive and anchored to the beginning of the
campaign name: mock matches "Mock Campaign Name", campaign name does not.
New widgets
The two parts of the filter are also available as standalone widgets, so you can
lay the filter out yourself instead of using he-campaign-filters:
| Widget | Purpose |
|---|---|
he-campaign-filters-campaignname | The Campaign Name label and input |
he-campaign-filters-applybutton | The Apply Filters button |
SDK
The name currently typed into the field is held in campaign state, so you can read or preset it:
// Preset a filter, then load the matching campaigns
window.hapi.campaign.state.filterCampaignName = "Sales"
await window.hapi.service.campaign.getCampaigns()| State property | Type | Meaning |
|---|---|---|
filterCampaignName | string | Name the campaign list is filtered by. Empty means no filter |
filtersAccordionIsOpen | boolean | Whether the Campaign Filters accordion is expanded |
window.hapi.service.campaign.getCampaigns() sends filterCampaignName to the
campaign list endpoint whenever it is set, including for calls your own code
makes.
Styling
| Selector | Element |
|---|---|
.hapi__campaigns-filters-accordion | The accordion wrapping the filters on Campaign Landing |
.hapi__campaigns-filters | The filters container |
.hapi__campaigns-filters-campaign-name | The Campaign Name field |
.hapi__campaigns-filters-apply-button | The Apply Filters button |
#campaign-filter-campaign-name-input | The Campaign Name input |
#campaign-filters-apply-button | The Apply Filters button |
Backwards compatibility
- Additive: the filter is empty by default, so
getCampaigns()returns the same campaigns as before until a name is set. - The Campaign Landing widget gains the accordion above the list. Collapse it
from view with
window.hapi.ui.service.hideElement(".hapi__campaigns-filters-accordion")if you do not want to offer filtering. - No SDK function, getter, setter, property, or event was removed or renamed.
- No translation keys were removed.
I18n
The following i18n translations have been added:
| Key | "en" value | "de" value | "nl" value | "fr" value | "es" value | "it" value |
|---|---|---|---|---|---|---|
| campaign.filters.heading | Campaign Filters | Kampagnenfilter | Campagnefilters | Filtres de campagne | Filtros de campaña | Filtri campagna |
| campaigns.filters.campaign-name | Campaign Name | Kampagnenname | Campagnenaam | Nom de la campagne | Nombre de la campaña | Nome della campagna |
| campaigns.filters.campaign-name-placeholder | Type the start of a campaign name | Anfang eines Kampagnennamens eingeben | Typ het begin van een campagnenaam | Saisissez le début d'un nom de campagne | Escribe el inicio de un nombre de campaña | Digita l'inizio di un nome campagna |
| campaigns.filters.apply-filters | Apply Filters | Filter anwenden | Filters toepassen | Appliquer les filtres | Aplicar Filtros | Applica Filtri |