Retrieve the username of the person connected on the Experience Builder Application

[JasonBOCQUET]

Hello community,

I am currently building an ArcGIS Experience Builder application and I would like to be able to add a header where the person viewing the application with a connected ArcGIS account can see a message like "Hello, Franck". But I don't know how to get the user's first name or nickname and how to integrate it into a Text widget or elsewhere.

Can you help me ?

Have a nice day.

[JeffreyThompson2 · Accepted solution]

This is not possible in the Online/Enterprise versions. In Developer Edition, this information can be accessed in the props.user object in any custom widget.

[JasonBOCQUET]

Hello @JeffreyThompson2 

Thanks for your reply ! 

Can I develop a custom widget in Developer Edition and add this widget in my application easily ? I mean i just have to write a code and import this code or it's more difficult ? 

[JeffreyThompson2]

Once you have created a custom widget in Developer Edition, you can drop it into an Experience the same way as any other widget. Depending on your set-up, deployment may be your biggest challenge. If you use Developer Edition, you will be responsible for hosting your final application to a webserver. https://developers.arcgis.com/experience-builder/guide/deployment-topics/

I am not 100% certain you can edit an Experience in Developer Edition that has already been created in Enterprise/Online, but I think it should be possible. Worst case: You might have to rebuild all of your pre-existing work. 

[JasonBOCQUET]

Hey again here,

I'm trying to develop the widget to retrieve the username of the person connected on my application.

I'm very begginer on development and I don't understand how to use the props.user object. There is any documentation to understand how to use this object ? 

[JeffreyThompson2]

I'm guessing you don't have any React experience. That's going to make jumping into Experience Builder tough. Start learning React before getting into Experience Builder and you should understand where to find the props.

https://community.esri.com/t5/experience-builder-custom-widgets/what-is-the-best-place-to-start-lear...

[JasonBOCQUET]

Thanks for your link; i'm gonna start to learn all of this !

[JeffreyThompson2 · Accepted solution]

https://community.esri.com/t5/experience-builder-custom-widgets/security-widget/m-p/1344363

I decided to share a custom widget that includes a line that displays the user's username.

[JasonBOCQUET]

Oh thanks ! It was easy to implemet in fact. I have to import the correct library and to use {props.user.fullName} tag. 

It's time to learn to do more insane widget ! thank

[JasonBOCQUET]

Hi @JeffreyThompson2 i used a part of your code to retrieve the username and it works partially.

Actually here is my code : 

import { React, AllWidgetProps } from 'jimu-core'
import './widget.css'

const { useState, useEffect } = React

const Widget = (props: AllWidgetProps<any>) => {
console.log(props.user)
React.useEffect(() => {
console.log('props.user in useEffect', props.user)
}, [props.user])


  return (
<div className='container'>  
<div className='center'>
{props.user.firstName &&
	 <span><p>Bonjour {props.user.firstName}</p></span>
	 }
	</div>
	</div>
  )
}

export default Widget

the problem that I have is the following : we use a SSO connexion system and when the users going on our application the widget cannot identity the user (logic because he's not connected)

So the user have the login popup, he click on OK and he have the access to the application. BUT the widget doesn't be actualized so it stay with the error message "Cannot read property..."

How can I modify the code to have an actualization/a check to replace the error code by the username once the user is connected.

I have already test some of Hook function like "useEffect" to solve the problem; but because the login windows is a pop-up windows, I think it doesn't trigger an action on the application windows (and it's the reason that explaining why the "cannot read property" do not be actualised).

thanks 🙂