nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Guidance required for Migration from 3.x to 4.32

ShabirRahim

Hi,

I am planning to migrate the Map from 3.x to 4.32. I could see DOJO being used in existing code and integrated in SAP GUI. I went through some of the posts created in the past and understood that the change is to rebuild everything and follow the URL as given below.

https://developers.arcgis.com/javascript/latest/migrating/

I would require your support with some more information. Is there a guided steps or procedure document to follow. I wanted to make sure no dependent steps are missed, as i don't want to randomly do some steps and miss some steps or dependencies.

Can some one who had done migration in the past advise on how to go about with steps on migration and dependencies. Any Advise would greatly help. Kindly advise.

Thanks again .

Find more posts tagged with

Accepted answers

ShabirRahim

Hi Edvinas_S,

Thanks for the response. The people who implemented 3.x is no more with us, so someone who is new to this has to take this migration forward. Hence replying for some more clarity. Can you please advise.

If i my understanding is correct, you are suggesting to use the Libraries as given in URL below to build maps from scratch like new implementations,

https://developers.arcgis.com/javascript/latest/api-reference/

and not go with migration concepts given in URL like converting segment by segment?

https://developers.arcgis.com/javascript/latest/migrating/

Would you be able to provide some more details and if possible some URLs to refer?

Thanks Once again.

All comments

Edvinas_S

There is no procedure on how to migrate, because 3.x and 4.x are too different and every application is also different. You will be basically rewriting the app from scratch, but with some guidance from the old 3.x app.

I would advise you not to try and edit the entire 3.x app to make it compatible with 4.x. That would be a mistake. You should create an empty 4.x app and start moving functionality from 3.x one item/tool/function at a time. You might even be able so copy/paste some functions without changing anything. This process will be iterative, so you will make new imports as you go along.

As for dependencies, most of functionality that 3.x has is also available in 4.x. It might be called different and used in a different way, but it's probably there. You'll have to use documentation for this.

KevinMorrow

I have to agree with Edvinas_S. We did a quick port of our 3.x app to 4.x due to time constraints using the same 3.x logic in many places. We have now had to go back and refactor code in areas such as editing and other things to take an entire different approach to optimize performance and functionality. While following 3.x logic worked, it was not the best way. Hindsight is a wonderful thing 😉

ShabirRahim

Hi Edvinas_S,

https://developers.arcgis.com/javascript/latest/api-reference/

and not go with migration concepts given in URL like converting segment by segment?

https://developers.arcgis.com/javascript/latest/migrating/

Would you be able to provide some more details and if possible some URLs to refer?

Thanks Once again.

Edvinas_S

Those migration concepts are just an overview of what you are most likely to run into. That single page is definitely not enough to migrate any real world appliaction to 4.x. You will still have to use the api reference for your specific needs.

Rewriting from scratch will be easier, because you will immediately see if the functionality you added is working or not. If you choose to edit the old app, you will start with huge amount of errors, nothing will load and you will have no idea if a change you made actually works.

I made a small test. I took a 3.x Editor sample and cut it to bare minimum: https://codepen.io/edvinasHB/pen/raaBepw

Then I migrated it to 4.x: https://codepen.io/edvinasHB/pen/NPPKxqM

I left comments in the 4.x version about what was changed. You can see that even for a basic example I had to touch almost every single part of the code. Most changes are small, like renaming a function, but you will still have to do some debugging and use documentation to find the correct implementation.

I should mention that this example is just a direct word-for-word 'translation' of the 3.x app, so it still uses widgets. To make a REALLY up to date app, you should use web components.

ShabirRahim

Hi Edvinas and Kevin,

Thanks for response. I was trying to get information of migration before starting the migration. Having understood i have to do from scratch. Now I have started the migration, and facing challenges.

Can you advise on one of the challenges.

The code used uses DOJO extensively. Even if i can change the way CSS import happens, there are DOJO properties such dojo-types and dojo-props as given below, and I need to change it to AMD format.

<div id="mainContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true">

The API references or the basic Migration page doesn't really describe how to migrate these properties. is there any helper pages to migrate by navigating these challenges? Can you or some one advise.

Edvinas_S

Hey,

you will have to see what your code does and recreate the functionality using new tools.

4x doesn't use dojo, so you will have to use another UI library, like Calcite, to recreate similar functionality. Dojo BorderContainer allows you to resize a panel. To do that in Calcite, you can use calcite-shell-panel component and add "resizeable" attribute. Here is a demo I found that uses it: https://codepen.io/sagewall/pen/YzjVgEM

Docs for calcite-shell-panel: Shell Panel | Calcite Design System | Esri Developer

You will not be able to recreate every single prop from dojo into calcite, so don't try to make it identical to the old app.

My main suggestion for you is to use ChatGPT. Prompt something like "in arcgis js api 3 I am using dijit.layout.BorderContainer element. How to convert it to arcgis js api 4 Calcite component?"
It should at least give you some ideas of what Calcite components you can use. Won't work every time, but it's better than searching on google

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.