UI Components

Textbox

  • (Browser) HTML text box

    <input type="text" value="ABC" onblur="myBlur()" onchange="myChange()">

  • (Custom component) HTML text box //earlier

    <cst-textbox model="{inputMdl}" options.bind="{options}" evt-blur-callback="myBlur()">

    Note: Options can have style, theme..etc

  • (SLICK component) HTML text box

    • Near to HTML standards

      <cst-input type="text" value="ABC" onblur="myBlur()">

    • Alternative schema way

      ```javascript
      let mySchema = {
      type: "object",
      required: ["tenderNotificationNumber"],
      properties: {
      tenderId: {
      type: "string", //double
      minLength: 3,
      maxLength: 500
      description: "Tender# is required",
      title:"Tender No",
      customAttr: {
      placeHolder: ' Enter',
      infoText:'Example : TW/ASSAM/2019_Assam_67020_1'
      }
      }
      }
      }
      <cst-input json-value="ABC" json-schema="mySchema" json-schema-prop="tenderId">
      ```

      Note : for developer quick access in the larger schema 'json-schema-prop' , can be nested too Text Box

Dropdown

  • (Browser) HTML select

    <select id="ddlCars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </select>

  • (Custom component) HTML dropdown //earlier

    <cst-dropdown items.bind="{items}" input-id.bind="{inputid}" evt-change-callback="myChange()">

    Note: Showing few options/ attributes only

  • (SLICK component) HTML dropdown

    • Near to HTML standards

      <cst-select value="mercedes" onchange="myChange()" ite ms.bind="{items}">

    • Alternative schema way

      let mySchema = {
      type: "object",
      properties: {
      RegionId: {
      type: "int",
      title:"Region",
      customAttr: {
      placeHolder: ' -- Select --',
      infoText:'Indian states',
      dataSource: 'MASTER_TBL_GROUP_REGION_LEVEL_1', //to check in page object
      dataSourceAPI: '/generic/getMasters?CODE=MASTER_TBL_GROUP_REGION_LEVEL_1',
      displayType:'dropdown'//radio, longTextBox,
      variant:'SLIM_MAT'
      }
      }
      }
      }
      Note : In form component, group all dataSource & call one API
      <cst-select json-value="mercedes" json-schema="mySchema" json-schema-prop="RegionId">

Form

  • (Browser) Independently add all small components & do design

  • No custom component done (earlier in GREAT thought like this as old_form)

  • (SLICK component) Form

    • only schema way

      let mySchema = {
      type: "object",
      properties: {
      RegionId: {
      type: "int",
      title:"Region",
      customAttr: {
      placeHolder: ' -- Select --',
      infoText:'Indian states',
      dataSource: 'MASTER_TBL_GROUP_REGION_LEVEL_1', //to check in page object
      dataSourceAPI: '/generic/getMasters?CODE=MASTER_TBL_GROUP_REGION_LEVEL_1',
      displayType:'dropdown'//radio, longTextBox
      }
      },
      tenderId: {
      type: "string", //double
      minLength: 3,
      maxLength: 500
      description: "Tender# is required",
      title:"Tender No",
      customAttr: {
      placeHolder: ' Enter',
      infoText:'Example : TW/ASSAM/2019_Assam_67020_1'
      }
      },
      customSearchBtn: {
      type: "string",
      title:"Search",
      customAttr: {
      displayType:'button'
      }
      },
      customClearBtn: {
      type: "string",
      title:"Clear",
      customAttr: {
      displayType:'button'
      }
      },
      customSaveBtn: {
      type: "string",
      title:"Save",
      customAttr: {
      displayType:'button',
      targetFormDataAPI:'/generic/saveMaster?Collection=TENDERS', //in body form object
      functionModule:'/filePath.js?fn=genericFunc',
      functionId:'ASL_SHUBHA_GENERIC_2'
      }
      }
      },
      customLayout:{
      small:[
      "RegionId",
      "tenderId"
      "customSearchBtn",
      "customClearBtn",
      "customSaveBtn"
      ],
      medium:[
      "RegionId*3, tenderId",
      "customSearchBtn, customClearBtn",
      "customSaveBtn"
      ]
      }
      }
      Note : Property name like "customSearchBtn" can become element identifier
      <cst-form json-value="" json-schema="mySchema" on-elm-click="someFunc(propId)" on-elm-change="someFunc(propId)">

      Note : Either have different schema for different screens, else common_schema & page_layout schema separate & merge both objects at run time customLayout = Grid/ Flex (have wrap in both ?)

      Form should have error summary component too

      Think of nested forms, child array items..etc (AfterMT)

      In future can't this schema be created by UI (CRM) ? //currently not

  • List page

  • Similarly, Summary page containing form, list page, header & quick icons