Valtimo frontend libraries (5.8.0)

New Features

The following features were added:

  • Digit only input

    The v-input component exported from @valtimo/user-interface now supports a new type input: 'digitOnly'. This option displays a text input field which only accepts numbers as input.

  • Improved tooltips

    Various tooltips for plugin configuration components have been added or improved.

  • Improved the select component of the @valtimo/user-interface library

    • Background color change

      The select component has been improved to follow the default input style and to visually indicate when a dropdown menu is enabled or disabled.

      The default v-select component's background style color appearance has been changed to white to add contrast and distinguish it from the disabled state.

  • Added auto scrolling to modal

    The valtimo-modal component now scrolls to the top when transitioning between form flow steps, and when switching pages in a Form.IO wizard.

  • Added option to customize Left Sidebar width adjustment

    The valtimo-left-sidebar component now supports the option to customize the default, maximum and minimum width values from the left side menu. Also added the default behavior of keeping the resized value manually when refreshing the page.

    The change is optional and made in the environment.ts file (see example below). If there is no change, the component will receive predefined values by default.


    export const environment: ValtimoConfig = { ...
    customLeftSidebar: {
        defaultMenuWidth: 200, //default value: 230
        maxMenuWidth: 300,     //default value: 330
        minMenuWidth: 100,     //default value: 120
  • Case detail tab with zaakobjecten

    Added a tab page with a dropdown to select an object type that is linked to the current case. After selecting this type, a list of objects is shown of this type. To include this tab, add it to the tabsFactory in your implementation:


    import {
    } from '@valtimo/dossier';
    export function tabsFactory() {
      return new Map<string, object>([
        [DefaultTabs.zaakobjecten, DossierDetailTabZaakobjectenComponent],

    For more information on how to customize case tabs, see this page.

  • Added session timeout prompt for Keycloak

    When an implementation uses Keycloak as its authentication provider, a session timeout prompt is now shown if the refresh token expires in five minutes or less. This uses a new component - v-prompt - which has been added to the @valtimo/user-interface library. It shows a timer for when the session is to expire, and offers a logout action, and an action to continue the session, which automatically refreshes the access token. If no action is taken, the user is logged out when the timer runs out.

  • Changed input border

    The shadows on the borders of v-table, v-input and v-select components have been replaced by a gray border to improve the contrast with the background.


The following bugs were fixed:

  • Refactor of case list component

    In developing new features for the case list component, it was discovered that the component contained quite a few bugs which were hard to fix. It was decided to refactor the component using observables. The following should now work without bugs:

    • On case definition load: get pagination (including sorting) from local storage. If this does not exist, get default pagination and sorting from the environment file.

    • Go to the first page when typing in a search term or sequence number.

    • Switch to last available page on choosing a larger page size.

    • On switching case definitions, the page indicator shows the correct page number.

    • When switching case definitions, the correct cached sort state or default sort state is retrieved.

  • Styling fix for the searchable dropdown component

    The component valtimo-searchable-dropdown, exported by @valtimo/components, had styling issues locally. Its styling was conflicting with styling imported by ng-multiselect-dropdown. Its class names have been made more specific in order to avoid these styling conflicts.

  • Creating a process link with plugins will now only show plugin configurations with actions

    The Form links Plugin page used to show all plugin configurations but some of those configurations turned out to be unusable because the Plugin does not support any actions. The action needs to be selected on the second step of the modal.

    To prevent this the modal will now only show plugin configurations that support actions

  • Fix rotating blue stripe bug for loading animation

    In the new design - @valtimo/user-interface - ngx-skeleton-loader is used to display loading animations. The styling of this package conflicted with the styling imported by @formio/angular. A change has been merged to ngx-skeleton-loader to resolve this styling conflict. This updated package is now included in the libraries.

Breaking changes

No known breaking changes.


No new deprecations.

Known issues

This version has the following known issues:

  • Rotating blue stripes

    Certain pages could show rotating blue stripes while loading data. This will be fixed in a future update.

Last updated