Key Value Collector Work flow

Bindable Properties

  1. items
  2. displayItems
  3. extHideItem
  4. options
  5. extDisabled
  6. validationController
  7. idPrefix
  8. validateCallback

Overview

  • It is a component in which multiple key value pairs can be added.
  • Gives a card to add to take values from user for keys given.
  • Type of value can be added.
  • Will show the values in same way if data given.
  • Pairs can be added or deleted.
  • Component is responsive.
  • It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

  • In options, default add button label and tooltip will be taken as 'Add New'.
  • Default data type will be taken as 'text'.
  • Container's :
    • min-width: 350px(Big Screen)
    • min-width: 230px(Small Screen)
  • Element's :
    • width: 230px
    • min-height: 80px

Breakdown

  • Multiple cards will be wrapped.
  • If items or displayItems is not given, 'No data to display' message will be shown.
  • On click of add new, new item will be created and added in items.
  • On click of delete, item passed will be deleted.
  • Following classes are given to override CSS:
    • .cst-key-value-container-override : Container Class
    • .cst-key-value-element-override: Element Class