Page Comparison

🔹 Description

Description

...

Image Added

🔹System Dependencies

🔹 Installation

The package can be installed via npm empower-inputs:

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

Boolean

Parameter	Data Type	Constraint	Description	show
id	String	Required	It set the id for the select.
type	String	Required	Sets It set the visibility of the component. classtype of component to be use options: multiple-select (String) select (String)
options	Array	Required	It sets the data to display in the drop down selection. It should consist of: employee_code (String) employee_bucket_code (String) employee_name (String) employee_profile_pic (String) employee_position (String) employee_email (String)
placeholder	String	Optional	Custom class for the alert component	…..	….	…	…It displays the placeholder of the select.
label	String	Optional	It displays the label of the select.
value	Array	Required	It sets the value selected in drop down.
disabled	Boolean	Optional	It sets if the select should be disable or not.
required	Boolean	Optional	It sets to display asterisk ('*').

🔹 References

Repository Link: insert repo link: https://bitbucket.org/empowerteams/empower-custom-inputs/src/master/

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 Current

Key