Hi SendBird Staff,
Can we create custom modal for Users List because i want to add search box in User List Modal?
If we can create custom modal than can you guide me how is it possible?
Thanks
Hi @vcs_account, search of userid/nickname is not available in server side, as far as I know
The work around would be to create your own Modal for creating channels
And using sendBirdSelectors.getCreateChannel to create the channel
import {
SendBirdProvider,
withSendBird,
ChannelList,
sendBirdSelectors,
} from 'sendbird-uikit';
const CustomComponent = ({ createChannel, sdk, leaveChannel }) => {
const [channelUrl, setChannelUrl] = useState('');
return(
<>
<button onClick={() => {
let params = new sdk.GroupChannelParams();
params.isPublic = false;
params.isEphemeral = false;
params.isDistinct = false;
params.addUserIds(['sravan']);
params.name = "NAME";
createChannel(params).then(c => {
setChannelUrl(c.url);
}).catch(c => console.warn(c));
}}>
createChannel
</button>
<button onClick={() => {
leaveChannel(channelUrl).then(c => {
setChannelUrl('');
}).catch(c => console.warn(c));
}}>
LeaveChannel
</button>
<br />
{ `Created channel is: ${channelUrl}` }
</>
);
};
const CustomComponentWithSendBird = withSendBird(CustomComponent, (state) => {
const createChannel = sendBirdSelectors.getCreateChannel(state);
const leaveChannel = sendBirdSelectors.getLeaveChannel(state);
const sdk = sendBirdSelectors.getSdk(state);
return ({ createChannel, sdk, leaveChannel });
});
export const createAndLeaveChannel = () => (
<SendBirdProvider appId={appId} userId={userId} nickname={userId}>
<CustomComponentWithSendBird />
<div style={{ width: '320px', height: '500px' }}>
<ChannelList />
</div>
</SendBirdProvider>
);
@Sravan_S Thanks,
I did’t understand what are you saying how can create own modal of users list with search box.
can you guide me if you have any example of code?
So, with sendbird user list, you cannot search server side, that’s why we didn’t include a search option
You will have to create your own UI if you have to include search, I can try to show you a sample, but will take a little time
@Sravan_S Thanks,
if you give me a sample that would be great for me because i have done all work but only search functionality pending.
Hello @vcs_account
Can you tell me how did you implement this, passing the newly created channel to channel list is implementation dependent
Ideally, you should make use of sendBirdSelectors.getCreateChannel as in the example(Add Search Feature in Users List Modal in UIKit) that I mention just before
@Sravan_S
I created new custom component which you mentioned before ( Add Search Feature in Users List Modal in UIKit) but now we are not showing channel list. How can show channel list. I am using this code.
const CustomComponent = ({ createChannel, sdk, leaveChannel, userlist }) => {
const [channelUrl, setChannelUrl] = useState(‘’);
const [currentChannelUrl, setCurrentChannelUrl] = useState(“”);
const [showSettings, setShowSettings] = useState(false);const [state, setState] = useState({ showMessage : false }); const getUserModal = () => { setState({ showMessage: true }) } const [user, setUser] = useState({ user: "" }); const closeUserModal = () => { setState({ showMessage: false }) } const searchUser = (event) => { setUser({ user: event.target.value}) } const filteredUser = userlist.filter(fuser => { return fuser.nickname.toLowerCase().includes(user.user.toLowerCase()) }) function AllUsers(props) { const listItems = props.sendbirdUsers.map((user) => <div className="sendbird-user-list-item "> <div className="sendbird-user-list-item__avatar sendbird-avatar" style={{ height: '40px', width: '40px' }}> <div className="sendbird-image-renderer sendbird-avatar-img" style={{ height: '40px', width: '40px', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', backgroundSize: 'cover', backgroundImage: "url(" + user.profileUrl + ")" }}> </div> </div> <div className="sendbird-label sendbird-user-list-item__title sendbird-label--subtitle-1 sendbird-label--color-onbackground-1"> {user.nickname} </div> <label className="sendbird-user-list-item__checkbox"> <label className="sendbird-checkbox"> <input id={user.userId} type="checkbox" /> <span className="sendbird-checkbox--checkmark"> </span> </label> </label> </div> ); return ( <ul>{listItems}</ul> ); } return ( <> {state.showMessage && <div id="sendbird-modal-root" style={{ zIndex: 1000 }}> <div className="sendbird-modal"> <div className="sendbird-modal-content"> <div className="sendbird-modal-header"> <div className="sendbird-label sendbird-label--h-1 sendbird-label--color-onbackground-1"> New channel </div> </div> <div className="sendbird-modal-body"> <div> <div className="sendbird-label sendbird-label--caption-1 sendbird-label--color-onbackground-3"> 0 selected <input onChange={searchUser} type="text" /> </div> <div className="sendbird-create-channel--scroll"> <AllUsers sendbirdUsers={filteredUser} /> </div> </div> </div> <div className="sendbird-modal-footer"> <button onClick={closeUserModal} type="button" className="sendbird-button sendbird-button--secondary sendbird-button--big "> <div className="sendbird-label sendbird-button__text sendbird-label--button-1 sendbird-label--color-oncontent-1"> <div className="sendbird-label sendbird-label--button-1 sendbird-label--color-onbackground-1">Cancel</div> </div> </button> <button type="button" className="sendbird-button sendbird-button--primary sendbird-button--big "> <div className="sendbird-label sendbird-button__text sendbird-label--button-1 sendbird-label--color-oncontent-1"> Create </div> </button> </div> <div className="sendbird-modal-close"> <button className="sendbird-iconbutton " type="button" style={{ height: '32px', width: '32px' }}> <span className="sendbird-iconbutton__inner"> <div role="button" tabIndex={0} className=" sendbird-icon sendbird-color--secondary" style={{ width: '24px', height: '24px' }}> <svg viewBox="0 0 24 24"> <path className="icon-close_svg__fill" fill="#7B53EF" fill-rule="evenodd" d="M6.613 5.21l.094.083L12 10.585l5.293-5.292a1 1 0 011.497 1.32l-.083.094L13.415 12l5.292 5.293a1 1 0 01-1.32 1.497l-.094-.083L12 13.415l-5.293 5.292a1 1 0 01-1.497-1.32l.083-.094L10.585 12 5.293 6.707a1 1 0 011.32-1.497z"> </path> </svg> </div> </span> </button> </div> </div> <div className="sendbird-modal-backdrop"></div> </div> </div> } <div className="sendbird-app__channellist-wrap"> <div className="sendbird-channel-list"> <div className="sendbird-channel-list__header"> <div className="sendbird-channel-header"> <div className="sendbird-channel-header__title"> <div className="sendbird-label sendbird-label--h-2 sendbird-label--color-onbackground-1"> Channels </div> </div> <div className="sendbird-channel-header__right-icon"> <button onClick={getUserModal} className="sendbird-iconbutton " type="button" style={{ height: '32px', width: '32px' }}> <span className="sendbird-iconbutton__inner"> <div role="button" tabIndex={0} className=" sendbird-icon sendbird-color--primary" style={{ width: '24px', height: '24px' }}> <svg viewBox="0 0 24 24"><path className="icon-create_svg__fill" fill="#7B53EF" fill-rule="evenodd" d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11c-1.67 0-3.255-.373-4.673-1.039l-.657.218c-2.237.716-3.8.964-4.69.742-1.049-.261-1.256-.72-.62-1.373.439-.524.805-1.178 1.097-1.963.234-.625.142-1.5-.276-2.625A10.933 10.933 0 011 12C1 5.925 5.925 1 12 1zm0 2a9 9 0 00-8.187 12.742l.152.314.051.101.04.107c.569 1.532.709 2.859.275 4.02l-.143.365-.072.162.088-.019a23.181 23.181 0 001.832-.511l.646-.213.765-.26.73.343A8.962 8.962 0 0012 21a9 9 0 000-18zm1 6v2h2c1.333 0 1.333 2 0 2h-2v2c0 1.333-2 1.333-2 0v-2H9c-1.333 0-1.333-2 0-2h2V9c0-1.333 2-1.333 2 0z"> </path> </svg> </div> </span> </button> </div> </div> </div> <div className="sendbird-channel-list__body"> <div> </div> <div className="sendbird-channel-list"> <div className=" sendbird-place-holder"> <div className="sendbird-place-holder__body"> <div role="button" tabIndex={0} className="sendbird-place-holder__body__icon sendbird-icon " style={{ width: '64px', height: '64px' }}> <svg viewBox="0 0 24 24"> <path className="icon-chat_svg__fill" fill="#7B53EF" fill-rule="evenodd" d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11c-1.67 0-3.255-.373-4.673-1.039l-.657.218c-2.237.716-3.8.964-4.69.742-1.049-.261-1.256-.72-.62-1.373.439-.524.805-1.178 1.097-1.963.234-.625.142-1.5-.276-2.625A10.933 10.933 0 011 12C1 5.925 5.925 1 12 1zm0 2a9 9 0 00-8.187 12.742l.152.314.051.101.04.107c.569 1.532.709 2.859.275 4.02l-.143.365-.072.162.088-.019a23.181 23.181 0 001.832-.511l.646-.213.765-.26.73.343A8.962 8.962 0 0012 21a9 9 0 000-18z"> </path> </svg> </div> <div className="sendbird-label sendbird-place-holder__body__text sendbird-label--body-1 sendbird-label--color-onbackground-2"> No channels </div> </div> </div> </div> </div> </div> </div> <div className="sendbird-app__conversation-wrap"> <Channel channelUrl={currentChannelUrl} onChatHeaderActionClick={() => { setShowSettings(true); }} /> </div> { showSettings && ( <div className="sendbird-app__settingspanel-wrap"> <ChannelSettings channelUrl={currentChannelUrl} onCloseClick={() => { setShowSettings(false); }} /> </div> )} </> );};
const CustomComponentWithSendBird = withSendBird(CustomComponent, (state) => {
const createChannel = sendBirdSelectors.getCreateChannel(state); const leaveChannel = sendBirdSelectors.getLeaveChannel(state); const sdk = sendBirdSelectors.getSdk(state); return ({ createChannel, sdk, leaveChannel });});
let chatComponent = creatReactClass({
render: function () { if (this.props.appkey != undefined) { return <div> <SendBirdProvider appId={this.props.appkey} userId={this.props.userprofileid} nickname={this.props.username} userListQuery={customUserQuery}> <div className="sendbird-app__wrap"> <CustomComponentWithSendBird userlist={this.props.userslist} /> </div> </SendBirdProvider> </div> } else { return <div> </div> } }})
@Sravan_S
how Can hide this section in ChannelList Component
which is in circle If I can do please tell me how is it possible?
are you working on search feature?
To hide the title of ChannelList:
.sendbird-channel-list__header {
display: none;
}
Actually, next release, we are planning to include renderChannelListHeader() using which you can render custom component in the circled area. I think it would be cleaner than the CSS workaround
We are not working on the search feature, but I have talked about this with some members of the server team. Hopefully we get it started in the nearby future
Is this question still valid?
Actually, next release, we are planning to include
renderChannelListHeader()using which you can render custom component in the circled area. I think it would be cleaner than the CSS workaround
that’s great you mean after that i will create own modal?
Actually i created new custom component for Channel list and User modal but i am stuck on Channel List how can pass channel list to custom component?
1 Like
I was working on an example(didnt add the search implementation, left space for it)
See if this implementation works for you
Thanks @Sravan_S,
It will really help me to achieve my requirement. Thanks a lot for sending me working demo of code. 
@Sravan_S
I have achieved the search thing in users list modal and thanks for your technical support.I attached the screen shot of search below the screen. @Sravan_S can i add search on channel list if i can add then please guide me how to add search feature on Channel List?
How to get userList from the app for the custom created modal to show the userList?
