Community
Select to view content in your preferred language

Template for a new custom web app

2646
12
Jump to solution
02-28-2023 06:51 AM
MichailMarinakis1
by
Frequent Contributor
‎02-28-2023 06:51 AM

Hi all, 

4 years ago, we created a production application based on arcgis js cli. During these years, we have created a lot of custom widgets for this app, following esri documentation, and we have migrated from:

  • JS version 4.13 to 4.26,
  • AMD to ESM,
  • webpack 4 to 5,
  • typescript 3.1.1 to 4.7.4,
  • calcite maps 0.0.9 to calcite design 1.0.7 (partially, still on going),
  • ... 

Everything is working like charm and all the necessary tools to deploy to a production environment were included with the cli e.g. service workers, minification, PWA, etc. It saved us a loot of time! We considered that the cli was the tool to build production custom web applications.

We want to start developing a new custom web app. We found out that the arcgis-js-cli is going to be deprecated (with a recommendation to use vite).

We have been looking at the repo https://github.com/Esri/jsapi-resources:

  • The custom widget sample has a deprecation flag (with a comment to use the UI component library of our choice (like react? so it is recommended not to use the UI framework of custom widgets? ))
  • We noticed also a strong promotion of vite at most of the samples, instead of webpack.
  • There are not so many typescript samples, even though it is promoted from the documentation here.

What we are looking for is, a stable, "building for production", template to give us a boost start. So the question is, if we want to start creating a new custom web app, is there any official best practices/documentation/resources/recommended tools from esri? 

I know there is no single answer, there are a lot of parameters to make a decision like that, just wondering if there is a consensus in the forum here or something that is already discussed between esri developers 😀

Thank you!

@DasaPaddock 

@AndyGup 

@ReneRubalcava 

@BenElan 

 

12 Replies
MichailMarinakis1
by
Frequent Contributor
‎05-02-2023 01:30 AM

Perfect! thank you again for the prompt response.

0 Kudos
dndhm
by
Emerging Contributor
‎07-11-2023 05:37 AM

Hi @MichailMarinakis1 - it looks like you have successfully extended the Editor Widget recently. Were you able to customise the render output for the Editor's featureFormViewModel? I'm facing some challenges similar to those you mentioned in this thread and I'm hoping it's possible to customise the form view model without having to rebuild the whole widget from scratch...

0 Kudos
MichailMarinakis1
by
Frequent Contributor
‎07-12-2023 07:23 AM

Hi @dndhm, we did customize the editor tsx but not the FeatureForm. It is not recommended to customize widget's tsx 😁 and as from Release 4.27 it is officially deprecated (further information here). Just for reference, we extended the editor's tsx and we override the render function e.g. 

 

    render() {
        const element = super.render();
        // custom code

        return element;
    }

 

In your case, the Editor widget exposes the featureFormViewModel but not the featureForm tsx (or does it? I couldn't find it). Normally, you may configure the featureFormViewModel.formTemplate (example here). If you want to achieve something more advanced, then I can think of these two ways forward:

  1. Instanciate a new CustomFeatureForm() which extends from FeatureForm (or from esri.widgets.Widget) and you customize the UI  (old legacy approach, not recommended)
  2. You create a new custom ui, perhaps by using calcite design components, or based on your own ui framework e.g. react, (or both 😎), and you use the featureFormViewModel to develop your logic behind the UI. You can extend the viewmodel with extra custom methods and whatnot (recommended approach, further information here)

Hope i have helped 😊

0 Kudos