How to use fallbackDetails in SPFx react

Question

I am using @microsoft/mgt-react": "^2.1.0" and I see "fallbackDetails" in the documentation but no exammple how to use it.

I tried:

    return (<td title={uName} >
     <Person personQuery={email} showPresence={true} view={PersonViewType.oneline} 
      **fallbackDetails={fallback } //Here Tslint Error**
      personCardInteraction={PersonCardInteraction.hover} />
      </td>
    );

The complin is:

fallbackDetails: IDynamicPerson; personCardInteraction: PersonCardInteraction.hover; }' is not assignable to type 'IntrinsicAttributes & PersonProps & { children?: ReactNode; }'.
  Property 'fallbackDetails' does not exist on type 'IntrinsicAttributes & PersonProps & { children?: ReactNode; }'.ts(2322)

Can anyone provide an example that TypeScript will accept? Or maybe there is a Types.d.ts that I need to get

Thanks in advance

score 1 · Answer 1 · answered Mar 12 '21 at 12:51

1

I got a message from mgt. the format should be: fallbackDetails={{"displayName":"test displayName" , mail:"someone@contoso.com"}}

The complain was because I had the second prperty as email:"someone@contoso.com"

All is good now. Thank you all

answered Mar 12 '21 at 12:51

Ofer Gal

707
1
10
32

score 0 · Answer 2 · answered Mar 11 '21 at 01:35

I'd recheck any other mgt-* packages to make sure they're upgraded as well, and the fallback object you are feeding it.

The most basic react sample would look like the following:

        <Person
          personQuery={'me'}
          fallbackDetails={{"displayName":"test displayName"}}
          line2clicked={() => console.log('line1 clicked')}
          line1Property="displayName"
          line2Property="mail"
          view={PersonViewType.twolines}
        />

How to use fallbackDetails in SPFx react

2 Answers2