Reusable GUI elements for Knora
Clone or download
flavens Improve unit testing of knora/action module (#131)
* build (resource-dialog): remove exports of resource-dialog

* test (action): add tests to reverse pipe

* test (action): add tests to key pipe

* test (action): add tests to sortBy pipe

* test (action): add tests to admin-image directive

* fix(action): in sort-by pipe, change the type to Array<any> and fix the test

* test (action): add tests to progress-indicator component

* test (action): add tests to sort-button component

* test (action): improve tests of sort-button component

* test (action): improve tests of sort-button component

* test (action): add tests to existing-name directive + clean up

* test (action): in existing name directive spec, fix existingNames array to be type of [RegExp]

* test (action): fix tests in existing-name directive spec

* test (action): clean up
Latest commit a60d4b5 Dec 6, 2018


CircleCI Build Status

This is the demo and developing environment for Knora ui modules.

The modules help to create a graphical user interface for Knora in a quick and simple way. They're written in Angular (v6) including the material design.

Knora itself is a software framework for storing, sharing, and working with primary sources and data in the humanities.

It is developed by the Digital Humanities Lab at the University of Basel, and is supported by the Swiss Academy of Humanities and Social Sciences.

Knora and the Knora ui elements are free software, released under the GNU Affero General Public License.

This version of Knora-ui requires Knora v2.2.0-snapshot (pre-release) or later.

Already published modules


npm (scoped)

The core module contains every service to use Knora's RESTful webapi.


npm (scoped)

The authentication module contains the login form (for standalone usage) or a complete login- / logout-button environment incl. the login form.


npm (scoped)

Search module allows to make simple searches or extended searches in Knora. In extended search, resource class and its properties related to one specific ontology are selected to create your query.


npm (scoped)

The viewer module contains object components to show the resource class representations from Knora, the gui-elements for the property values and different kind of view frameworks.


npm (scoped)

The action module contains special buttons (e.g. to sort a list), pipes and directives.

Developers note

Good news: Angular 6 has a built-in library support. Previous we built the library with the following setup:

We used ng-packagr by following the ng-packaged-example and this tutorial:

Now we can create a library module quite easy. Please use the following command schema:

$ ng generate library @knora/[module-name] --prefix=kui

If you want to add more components, services and so on to this library, you can do it with:

$ ng generate component [path/in/your/module/][name-of-component] --project @knora/[module-name]

It puts the component or the service into lib/ directly. Otherwise you can define a path inside of lib/.

Install the demo app

$ cd knora-ui

$ yarn install --prod=false

$ rm -rf dist/@knora
$ yarn build-lib

The demo app runs on http://localhost:4200 and we use it on this repository's Github page

Developing modules

To create new e.g. component inside existing module use the following command:

$ ng g c [component-name] --project @knora/[module-name] --styleext scss

Knora module structure


  • services (for API requests)
  • constants & utils (to work with Knora)


  • buttons & buttons
  • progress-indicator
  • progress-stepper
  • message
  • directives & pipes
  • dialog


  • login
  • logout


  • search results
  • search panel incl. search action (like adding a collection)


  • object viewer (incl. video, audio, image)
  • properties (as form elements)
  • resource_class_form

Required version of Knora

3.0.0 or later