People Picker - Regular
Click on the search input below and type in something. Then click on "Search organization people" button.
This demo simply returns all persons by searching, you can implement filtering\searching function by your own.
Add person to people picker by clicking on search result.
Code:
People Picker - Compact
Create compact people picker by supplying uif-type="compact" type.
You can also prefill your model with selected persons like in this demo.
Code:
People Picker - searching as you type
It's possible to run search automatically when you are typing.
By providing uif-search-delay="500" people picker will run search automatically after specified delay.
Type in something into the input below, after 500ms search will be trigged.
Code:
People Picker - compact, async data, searching as you type
This demo combines compact people picker and search as you type feature.
It also adds async data source. You can provide uif-people function to return array of persons OR promise resolving array of persons.
People picker below simulates ajax request by using $timeout service.
Code:
People Picker - disconnected
You can provide uif-disconnected attribute for <uif-people-search-more> to render disconnected UI.
Click on element below to toggle disconnected state.
Code:
People Picker - disabled
Control disabled state by using ng-disabled attribute.
Code:
People Picker - members List:
Renders members list by supplying uif-type="memberList".
Code:
People Picker - faceile
uif-type="facePile" for facepile mode.
Code: