Backoffice Web GUI Wireframes Sketches

(... a little bit of history ...)

Introduction

Here is a small collection of sketches of different views of the web GUI to feed and utilise the data management platform (d:swarm).

note: these wireframes may differ from the current design of the backoffice web application ;)

Overview

application layout v2:

• left-hand side: source example records widget
• center: data mapping (overview) widget
• right-hand side: target (example) records widget (which are generated via applying the mappings and transformations)
• lower left: details of a transformation component (in a transformation workflow)
• lower center: transformation workflow detail widget
• lower right: function/transformation widget or list of pre-loaded mappings (e.g. filter lists)

application layout v2 as poster print

Overview with Overlay Dialogue for Filter Definition

• You can open the (overlay) filter definition dialogue via pushing the "Define filter ..." button in the detail widget of a selected filter component in the transformation workflow widget
• see also Filter (Facet) Definition Dialogue

application layout v2 with filter definition overlay dialogue as poster print

Data Mapping Widget

• This is the central dialogue to handle source-to-target schema mappings
• a single mapping (with its transformation), e.g. mapping output is ex:url, can be explored and edited in a separate widget (transformation logic widget)
• each component in the transformation logic widget can bear an own dialogue, e.g., a wizard for complex filters (facets)
• figuratively you can also inspect the source code of each component (in the example below: a combination of SPARQL + SPARQL functions + SPIN + SPARQLMotion) => however, this is currently not so important for the intented target group ;)

Example 1: 2 Complex Transformations in Detail

example 1 as poster print

Example 2: One Complex Transformation with 2 Sources in Detail

example 2 as poster print

Filter (Facet) Definition Dialogue

• one can imagine a dialogue to create complex filters (facets) in the detail widget of the "graph pattern" component
• the filters will be created on the source schema
• various matching criteria can be defined on different attribute paths per filter facet
• multiple filter facets can be logically combined with each other

TODO: how shall we define (logical) combine operators ('AND' and 'OR' could be misleading, e.g., a 'datafield' with a 'tag' = '029' and '050' is not existing, however, different 'datafield's in a record fulfil this requirement)

Example 1: Filter with 2 Facets

filter definition dialogue as poster print

Example 2: Filter with 2 Facets incl. Changes in the Source Data Widget

filter definition dialogue with source data widget pt. 1 as poster print

filter definition dialogue with source data widget pt. 2 as poster print

Backlog

• here all old sketches can be placed that are already dismissed (they'll just be collected for completeness)

Overview

• application layout v1

application layout v1 as poster print

Data Mapping Widget

Data Mapping Widget with Source Data Widget

Data Mapping Widget with Source Data Widget and Transformation after Target Schema Mapping