Page Comparison

🔹 Description

Description

Image Removed

Image RemovedA component wherein a user can select specific item or items from a range of options.

...

Image Added

🔹System Dependencies

🔹 Installation

The package can be installed via npm empower-inputs:

Code Block
npm i empower-inputs

?? Configuration

Code Block

import { SelectWithProfileSelectWithLinks } from 'empower-inputs';

.....................................


const sampleSelectWithProfilesampleSelectWithLinks = {
    id: 'selectTalentlink',
    type: 'multi-select',
    options: [
      {
        employee_codecategory: '8WzFa_veynqMfD9h'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Annie Ruth Suficiencialabel: "Sample 1 Links",
        employee_profile_piclink: "r8gbRpma2erKC0VZmhrsK8ko5TnDlLWZUOgOYM0DSOMz2BhoUXvdcTOB9KeIxTrj.jpg/sample-1",
        employee_position: 'QA Analyst',value: "sample-1"
        employee_email: 'annie.suficiencia@empowerteams.io'
      },
      {
        employee_codecategory: '20-0520'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_namelabel: "ClaroSample Abelardo2 LagmanLinks",
        employee_profile_piclink: "DLyv4BQMrGeNYLHWueWGjSe3mHXXlhT7mzYa9tzJgJ45BMdy04D5qwhOVk1hzoUd.jpeg/sample-2",
        employee_positionvalue: 'Experience Manager',"sample-2"
    
    employee_email: 'claro.lagman@empowerteams.io'
      },
      {
        employee_codecategory: '9shB7xW6Mm_tCFvP'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Cristopher John Barrabalabel: "Sample 3 Links",
        employee_profile_pic: "MfYggj5oHGckWp9xo52X63PimoqZXYe2LfnMHWif5hq7hXtRXOiLMcjnHZafcbmk.jpg",
        employee_position: 'QA Analyst',
        employee_email: 'cristopher.barraba@empowerteams.io'
      },
      {
        employee_code: '19-1244',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Crystal Joy Mena"link: "/sample-3",
        employee_profile_picvalue: "FBeHzK52TQrxgaJejCOFobiqvEOHAFc3Slz4Czx8b9nPjljvQRhAWIMNM3zdBuKp.jpg",
        employee_position: 'Sr. Business Analyst',sample-3"
          employee_email: 'crystal.mena@empowerteams.io'
      }
    ],
    placeholder: 'SelectSearch for employeedeals',
    label: "Sample Select With ProfileLinks",
    value: [],
    disabled: false,
    required: true,
    isMultiple: false
}

..................................

const inputChangedHandler = (val, key) => {
    console.log('VAL', val)
    console.log('KEY', key)
}

 <SelectWithProfile<SelectWithLinks
    config={sampleSelectWithProfilesampleSelectWithLinks}
    onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectWithProfilesampleSelectWithLinks')}
  />

🔹 Properties

Parameter	Data Type	Constraint	Description
id	String	Required	Set It set the id for the select.
type	String	Required	Set It set the type of component to display if multiple select drop down will be use.be use options: multiple-select (String) select (String)
options	Array	Required	Set the data to display in the drop down selection. It should consist of: employee_code employee_bucket_code employee_name employee_profile_pic employee_position employee_email category (String) label (String) link (String) value (String)
placeholder	String	Optional	Set It displays the placeholder of the select.
label	String	Optional	Set It displays the title/ label of the select.
value	Array	Required	Set It sets the value that selected in drop down.
disabled	Boolean	Optional	Set It sets if the select is should be disable or not.
required	Boolean	Optional	Set It sets to display asterisk ('*') or not.
isMultiple	Boolean	Required	It sets if the component is multiple select.

🔹 References

Repository Link: https://gitlabbitbucket.comorg/empowerteams/empower-custom-inputs.git/src/master/

NPM Package: https://www.npmjs.com/package/empower-inputs

...

Versions Compared

Old Version 1

New Version Current

Key