Page Comparison

🔹 Description

Description

...

Image Added

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

Code Block
npm installi <package> empower--saveinputs

🔹

...

Image Here

Configuration

Code Block
Insert Code Configuration Here

🔹 Component Variation Title 2 (ex. Alert with Batch Message)

Configuration

...

Configuration

Code Block

import { SelectWithProfile } from 'empower-inputs';

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


const sampleSelectWithProfile = {
    id: 'selectTalent',
    type: 'multi-select',
    options: [
      {
        employee_code: '8WzFa_veynqMfD9h',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Annie Ruth Suficiencia",
        employee_profile_pic: "r8gbRpma2erKC0VZmhrsK8ko5TnDlLWZUOgOYM0DSOMz2BhoUXvdcTOB9KeIxTrj.jpg",
        employee_position: 'QA Analyst',
        employee_email: 'annie.suficiencia@empowerteams.io'
      },
      {
        employee_code: '20-0520',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Claro Abelardo Lagman",
        employee_profile_pic: "DLyv4BQMrGeNYLHWueWGjSe3mHXXlhT7mzYa9tzJgJ45BMdy04D5qwhOVk1hzoUd.jpeg",
        employee_position: 'Experience Manager',
        employee_email: 'claro.lagman@empowerteams.io'
      },
      {
        employee_code: '9shB7xW6Mm_tCFvP',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Cristopher John Barraba",
        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",
        employee_profile_pic: "FBeHzK52TQrxgaJejCOFobiqvEOHAFc3Slz4Czx8b9nPjljvQRhAWIMNM3zdBuKp.jpg",
        employee_position: 'Sr. Business Analyst',
        employee_email: 'crystal.mena@empowerteams.io'
      }
    ],
    placeholder: 'Select employee',
    label: "Sample Select With Profile",
    value: [],
    disabled: false,
    required: true
}

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

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

 <SelectWithProfile
    config={sampleSelectWithProfile}
    onChanged={(e) => inputChangedHandler(e, 'sampleSelectWithProfile')}
 />

🔹 Properties

class

Parameter	Data Type	Constraint	Description
show	Boolean	Required	Sets the visibility of the component.

id	String	Required	Set the id for the select.
type	String	Required	Set the component to display if multiple select drop down will be use.
options	Array	Required	Set the data to display in the drop down selection.
placeholder	String	Optional	Set the placeholder of the select.
label	String	Optional	Custom class for the alert component	…..	….	…	…Set the title/label of the select
value	Array	Required	Set the value that selected in drop down.
disabled	Boolean	Optional	Set if the select is disable or not.
required	Boolean	Optional	Set to display asterisk ('*') or not.

🔹 References

Repository Link: insert repo link https://gitlab.com/empowerteams/empower-inputs.git

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

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

...

Versions Compared

Old Version 1

New Version 2

Key