How to render person card similar to MS Teams WhoBot?
How to render a person card with status and icons similar to a fluent UI react persona component in MS adaptive cards for a bot framework implementation? Something similar to the whobot person card as given below with the all the attributes, online status and icons? Can someone please guide me on how to achieve this for a bot framework implementation?
The card itself is quite simple and can be easily created from samples so i won't go into this detail here but this might be a good start for you -> https://www.madewithcards.io/cards/who-sample-card
Note: You can't create the same appearance for the status icon, you need to have a label giving you the status at this state. An overlay over an image is not possible atm. You could create a specific endpoint that renders the avatar together with the status as one image and return it from your bot that might be complete overkill, just use a label to begin with.
To get the data you'd need you need to use the Graph Api in your Bot before rendering the card.
- Status Infos -> https://learn.microsoft.com/en-us/graph/api/presence-get?view=graph-rest-1.0&tabs=http
- Basic User Infos -> https://learn.microsoft.com/en-us/graph/api/resources/person?view=graph-rest-1.0
- Works with + peers -> not 100% sure but this probably helps -> https://learn.microsoft.com/en-us/graph/people-example (you can replace /me/ with a person)
If you have the data you only need to fill your card and can send it to teams. You won't have the popups when hovering over the icons tho this is not possible with Adaptive Cards today.
Hope that helps a bit :)
- How to make background components visible but inaccessible when React Material UI Backdrop is opened?
- TypeScript: Implementing Rust-Like Result Type and Resolving Type Inference Issues in and Method
- How to use i18next on a custom Typescript library and a host at the same time?
- Array of data showing in console but not in HTML after passing it through dialog in Angular project
- Type for falsy and truthy values
- How to control legend symbols in Apache ECharts StackChart?
- Issue with nested creation in Prisma
- React native victory chart gives error value undefined
- How do I auto scroll in Angular?
- Typescript: Remove the intersection type from main type
- Removing from list causes initial animation to play when map returns a component
- How to run your project without hash in Angular
- TypeORM OneToMany causes "ReferenceError: Cannot access '<Entity>' before initialization"
- How can I align my Bootstrap container to fit the full width of the webpage?
- How to Validate Drop down value in playwright
- How to declare a fixed length array in TypeScript?
- How to write dynamic key for interface using modern typescript?
- Keyboard shortcut to extract local variable in JS/TS in Visual Studio Code
- Why is TypeScript having trouble conditionally inferring optional elements at the end of an array?
- Why are these tsconfig paths not working?
- changing element in ngOnInit not working when changing route, but is able to access element
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- TypeScript: is there a way to use the JSDOC @deprecated tag to mark a symbol imported from a module as deprecated?
- Typescript return type based on function
- Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'
- validate nested objects using class-validator in nest.js controller
- My cart component in an ecommerce project keeps redirecting to homepage instead of checkout and logs out the user in production
- this.dialogRef.close is not a function Angular 19
- How to define a return type that takes a Record, and returns a Record with the same properties, but with transformed value types
- Why TypeScript complains on concatonation of string | number types with (+)