furo-ui5-views

furo-ui5-views #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-views/furo-ui5-views.js';
exports FuroUi5Views js
exports <furo-ui5-views> custom-element-definition
superclass LitElement
mixes FBP

Summary: Manage views

Description #

furo-ui5-views allows you to manage custom views. This includes filter settings and table orders.

Tab orders are not implemented at the moment.

The user settings are stored in the local storage, session data in the session storage. Feel free to extend the furo-ui5-views component to store the settings anywhere else by overriding the saveData method.

furo-ui5-views manages the view data

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<furo-ui5-views
        view-id="vid.list-report"
        fn-inject-default="|--defaultData"
        fn-set-filter-ref="|--formRef"
        at-current-view="--CurrentViewSettingDO"
        at-raw-filter-data="--filterData"
        fn-show-at="--showViewDialogClicked"
></furo-ui5-views>

<furo-ui5-views-filter-settings
        fn-show="--setFilterClicked"
        fn-bind-settings="--CurrentViewSettingDO"
        fn-bind-filter="--filterDO"
></furo-ui5-views-filter-settings>

 <furo-ui5-views-table-settings
        row-type="project.Project"
        fn-show="--ShowTableSettingsClicked"
        fn-bind-settings="--CurrentViewSettingDO"
        at-fields-changed="--reqFieldsChanged"
        at-order-by-changed="--fieldSortChanged"
        at-order-changed="--columnOrderChanged"
        required-fields="id"
        sortable
      ></furo-ui5-views-table-settings>

       <furo-ui5-filtered-table
            fn-bind-data="--collectionDao(*.entities)"
            fn-set-columns="--columnOrderChanged"
            mode="SingleSelect"
          >
          ...
       </furo-ui5-filtered-table>

Inject the default

Specs #

You have to import the furo-ui5-specs or add the following muspec to your spec project.

.furo

1
2


dependencies:
- "https://github.com/theNorstroem/furo-ui5-specs.git v1.0.0"

µSpecs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


- type: 'furo.view.PersonalView #'
  fields:
    id: 'string:1 #'
    views: '[] furo.view.ViewSettings:2'

- type: 'furo.view.ViewSettings #'
  fields:
    id: 'string:1 #id'
    name: 'string:2 #Textual identifier'
    is_favorite: 'bool:3'
    is_standard: 'bool:4'
    auto_apply: 'bool:5'
    created_by: 'string:6'
    editable: 'bool:7 #'
    filter_settings: '[] furo.view.FilterItem:8'
    filter_object: 'google.protobuf.Any:9 #Contains the filter Object'
    table_settings: '[] furo.view.TableColumn:10'
    order_by: 'string:11 # sort order, comma separated list of field names'
    group_by: 'string:11 # group by'


- type: 'furo.view.FilterItem #Filter object'
  fields:
    field_name: 'string:1'
    show: 'bool:2 #show hide'

- type: 'furo.view.TableColumnSortRow #TableColumn '
  fields:
    id: 'string:1'
    display_name: 'string:2 #'
    descending: 'bool:3 #'
    options: '[] furo.Optionitem:4'

- type: 'furo.view.TableColumn #TableColumn '
  fields:
    field_name: 'string:1'
    show: 'bool:2 #show hide'
    sortable: 'bool:3 # set this to true if the field is sortable'
    groupable: 'bool:4 # set this to true if the field is groupable'
    label: 'string:5 # set this to true if the field is groupable'

- type: 'furo.view.SaveAsDialog #Filter object'
  fields:
    name: '* string:1'
    is_favorite: 'bool:3'
    is_standard: 'bool:4'
    auto_apply: 'bool:5'

Describe the filterable fields and sortable table columns.

sample data

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


export const Settings = {
  "views": [
    {
      "id": "default",
      "name": "Standard",
      "is_favorite": true,
      "is_standard": true,
      "auto_apply": true,
      "created_by": "Furo",
      "editable": false,
      "filter_settings": [


        {
          "field_name": "description",
          "show": true
        },
        {
          "field_name": "start",
          "show": true
        },
        {
          "field_name": "end",
          "show": true
        },
        {
          "field_name": "members",
          "show": true
        }
      ],
      "filter_object": {
        "description": null,
        "start": null,
        "end": null,
        "members": null
      },
      "table_settings": [
        {
          "field_name": "id",
          "show": false,
          "sortable" : true
        },
        {
          "field_name": "display_name",
          "show": true,
          "sortable" : true
        },
        {
          "field_name": "description",
          "show": true,
          "sortable" : true
        },
        {
          "field_name": "start",
          "show": false
        },
        {
          "field_name": "end",
          "show": false
        },
        {
          "field_name": "members",
          "show": true,
          "sortable" : true
        }
      ],
      "order_by": "",
      "group_by": ""
    }
  ]
}

Example #

Manage Filter Save Select Table Fieldorder

Table Sorter

Attributes and Properties #

headerText #

header-text string default: 'My Views'

Title of the dialog for “views”

saveAsHeaderText #

save-as-header-text string default: 'Save View'

Title of the “save as” dialog.

checkoxSetDefault #

checkbox-set-default string default: 'Set as Default'

Checkbox label for set as default on save as dialog.

checkoxApplyAutomatically #

checkbox-apply-automatically string default: 'Apply Automatically'

Checkbox label for apply automatically on save as dialog.

manageButtonText #

manage-button-text string default: 'Manage'

Button label to open the manage view dialog.

saveButtonText #

save-button-text string default: 'Save'

Button label for save.

saveAsButtonText #

save-as-button-text string default: 'Save As'

Button label for save as.

cancelButtonText #

cancel-button-text string default: 'Cancel'

Button label for cancel action.

manageViewHeaderText #

manage-view-header-text string default: 'Manage Views'

Title of the manage-view dialog.

placeholderSearch #

placeholder-search string default: 'Search'

placeholder for search fields.

colheaderDefault #

colheader-default string default: 'Default'

Column header for “default”.

colheaderApply #

colheader-apply string default: 'Apply Automatically'

Column header for “apply automatically”.

colheaderCreator #

colheader-creator string default: 'Created By'

Column header for “created by”.

colheaderView #

colheader-view string default: 'View'

Column header for “view name”.

okButtonText #

ok-button-text string default: 'Ok'

Button label for “Ok” action

viewId #

view-id string

This is the id vor the view, this key is used to store the search filters in the session storage.

Events #

search-triggered #

at-search-triggered → Event

Methods #

showAt #

showAt(ref `` ) ⟹ void

`` → fn-show-at

show opens the view

setFilterRef #

setFilterRef(ref `` ) ⟹ void

`` → fn-set-filter-ref

set the ref to the filter form

injectDefault #

injectDefault(data `` ) ⟹ void

`` → fn-inject-default

Inject the default settings. This is a set of predefined filters and columns.

data

loadData #

loadData() ⟹ string

* → fn-load-data

Loads the stored data. Extend and override, if you need another storage mechanism. The data is stored in local storage under the defined view-id.

saveData #

saveData(data `` ) ⟹ string

`` → fn-save-data

Stores the settings. Extend and override, if you need another storage mechanism. The data is stored in local storage under the defined view-id.

data