Search

Description

The search widget implements a highly customizable search functionality which is used in the Cockpit and Tasklist app. A search always consists of one or more search pills.

The search widget persists valid searches in the URL bar, it is therefore not possible to include more than one search widget per page.

Usage

Options

= cam-widget-search-searches
An array containing all searches. The elements of the array are objects which represent a single search pill. The properties of the objects are explained in the seach pill widget documentation. Functions, invalid-text and delete-text are not included.
= cam-widget-search-valid-searches
Like cam-widget-search-searches, but only includes valid searches.
= cam-widget-search-types
An array of possible search types. Every type is an object containing the following properties:
  • id: An object containing the properties key and value - corresponding to the type field of the search-pill widget
  • operators: An array containing objects describing possible operators for the type, corresponding to the operator.values array of the search-pill widget. If omitted, available operators are determined by variable type and the cam-widget-search-operators property.
  • default: Boolean indicating if this is the default type. The default type is used to create search pills if the user enters a string in the text input, which can not be matched with any type. Can not be used in combination with groups.
  • allowDates: Corresponds to the allowDates property of the search-pill widget
  • enforceDates: Corresponds to the enforceDates property of the search-pill widget
  • enforceString: Corresponds to the enforceString property of the search-pill widget
  • extended: Corresponds to the extended property of the search-pill widget
  • basic: Corresponds to the basic property of the search-pill widget
  • groups: An array containing the groups this type is member of. A search query can only contain search elements which are in the same group.
  • options: Corresponds to the options property of the search-pill widget
= cam-widget-search-operators
An object specifying the available operator by variable type. Is used when the type does not specify an operators array. Keys of the object are variable types. Each key must contain an array specifying the operators according to the operator.values array of the search-pill widget. Available variable types are undefined, number, string, object, date, boolean.
= cam-widget-search-translations
An object specifying the tooltips for the search. Available keys are: inputPlaceholder, invalid, deleteSearch, type, name, operator and value. Value must be a string.
@ cam-widget-search-id
Optional. A string specifying the id of the search. This should be used when having multiple instances of the search widget on the same page.
@ cam-widget-search-storage-group
Optional. A string specifying a namespace for local persistence of search criteria.
@ cam-widget-search-mode
Optional. A string specifying the name of an (glyph)icon (generally, you would use either `search` or `filter`).
= cam-widget-total
Optional. total number of results found

Example

All Searches: {{ searches.length }}
Valid Searches: {{ validSearches.length }}
$scope.searches = [];
$scope.validSearches = [];
$scope.translations = {
  'inputPlaceholder': 'Search for Anything',
  'invalid': 'This search query is not valid',
  'deleteSearch': 'Remove search',
  'type': 'Type',
  'name': 'Property',
  'operator': 'Operator',
  'value': 'Value'
};
$scope.types = [
  {
    'id': {
      'key': 'PredefinedOperators',
      'value': 'Predefined Operators'
    },
    'operators': [
      {'key': 'eq',  'value': '='},
      {'key': 'lt',  'value': '<'},
      {'key': 'like','value': 'like'}
    ],
    default: true
  },
  {
    'id': {
      'key': 'EnforceDate',
      'value': 'Enforce Date'
    },
    'operators': [
      {'key': 'eq', 'value': '='}
    ],
    allowDates: true,
    enforceDates: true
  },
  {
    'id': {
      'key': 'EnforceString',
      'value': 'Enforce String'
    },
    'operators': [
      {'key': 'eq', 'value': '='}
    ],
    enforceString: true
  },
  {
    'id': {
      'key': 'variableOperator',
      'value': 'Variable Operator'
    },
    allowDates: true,
    extended: true
  },
  {
    'id': {
      'key': 'basicQuery',
      'value': 'Basic Query'
    },
    basic: true
  }
];
$scope.operators =  {
  'undefined': [
    {'key': 'eq', 'value': '='},
    {'key': 'neq','value': '!='}
  ],
  'string': [
    {'key': 'eq',  'value': '='},
    {'key': 'like','value': 'like'}
  ],
  'number': [
    {'key': 'eq', 'value': '='},
    {'key': 'neq','value': '!='},
    {'key': 'gt', 'value': '>'},
    {'key': 'lt', 'value': '<'}
  ],
  'boolean': [
    {'key': 'eq', 'value': '='}
  ],
  'object': [
    {'key': 'eq', 'value': '='}
  ],
  'date': [
    {'key': 'Before', 'value': 'before'},
    {'key': 'After',  'value': 'after'}
  ]
};


<div>
  <div cam-widget-search
       cam-widget-search-searches='searches'
       cam-widget-search-valid-searches='validSearches'
       cam-widget-search-translations='translations'
       cam-widget-search-types='types'
       cam-widget-search-operators='operators'
       cam-widget-search-id='search1'
       cam-widget-search-storage-group='"search1"'
       cam-widget-search-mode='filter'
  />
</div>
<b>All Searches:</b> {{ searches.length }}<br />
<b>Valid Searches:</b> {{ validSearches.length }}

Groups

In this example, we have three types: A, B and C. Type A is in group A and type B is in group B. Therefore, both are mutually exclusive. It is not possible to construct a search query with search components of both types A and B (multiple As and multiple Bs are allowed, as are as many Cs as you like).
The storage group will here be
All Searches: {{ searches2.length }}
Valid Searches: {{ validSearches2.length }}
$scope.searches2 = [];
$scope.validSearches2 = [];
$scope.types2 = [
  {
    'id': {
      'key': 'A',
      'value': 'A'
    },
    'groups': ['A']
  },
  {
    'id': {
      'key': 'B',
      'value': 'B'
    },
    'groups': ['B']
  },
  {
    'id': {
      'key': 'C',
      'value': 'C'
    },
  }
];

<div>
  <div cam-widget-search
       cam-widget-search-searches='searches2'
       cam-widget-search-valid-searches='validSearches2'
       cam-widget-search-translations='translations'
       cam-widget-search-types='types2'
       cam-widget-search-operators='operators'
       cam-widget-search-id='search2'
       cam-widget-search-mode='filter'
  />
</div>
<b>All Searches:</b> {{ searches2.length }}<br />
<b>Valid Searches:</b> {{ validSearches2.length }}