New experience-builder developer

08-10-2022 10:47 PM
Labels (2)
New Contributor II

Greetings everyone,


I started working on ArcGIS Experience Builder for about 3 weeks.

I have followed the examples and tried to learn however, there is a lot of things that are blur to me.


1. I would like to know where can I find the file location of the experience ( which will includes all out-of-box widgets + my custom widgets ) and will I be able to implement my logic at that level, and how ?


2. I have a custom widget that has a button in it, I want onClick to perform some function then route to the other page. ( assuming we have page 1 and page 2 ).

How can that be achievable ?


Thanks and best regards

4 Replies
MVP Esteemed Contributor

If you're using the developer edition, everything should be in /server/public/apps/your-app-id in the ExperienceBuilder folder. I don't have experience implementing custom widgets, however.

- Josh Carlson
Kendall County GIS
0 Kudos
New Contributor II

Thank you Josh for the reply,

However, I have seen the content of the /server/public/apps before and all it have is a configure json files.

What I am interested in, is how to implement a function at "pages" level to ensure authentication, no  unauthorized access can get to the application.

0 Kudos
Esri Contributor

If you are looking for the out of the box widgets, you can find the source code for them under the client/dist/widgets folder.



If you wanted to modify the code you would have to copy the code out and push it the your-extensions folder and then add your code in as a custom extension of the original widget.

If you want to programmatically change a page you can simply do that implementing the below, 


 window.location.href = "/?page=page_1";



Though this will cause a page refresh, the alternative would be to look at the available dispatch options as I believe there should be an option in there to change the page, though I have not needed to use it, only change sections.





0 Kudos
New Contributor II

Thank you Grant for your efforts,

I have tried looking into the source code and check how the widgets been implemented, however I did not achieve my goal.

I would give you an example, maybe there is a work around that can be done.


I have the following code:

const onSubmit = () => {console.log('authentication...')}

<Link id='redirectTO' to={linkTo} target={target} onClick={onSubmit }>Login</Link>


I want to make sure that the Link component does not go to the next page unless the onClick function executes successfully.

0 Kudos