How to create LayerList2 widget?

  1. Copy LayerList folder as LayerList2 folder under C:\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets in server devweb0.canadacentral.cloudapp.azure.com

  2. Replace all layerlist by LayerList2 under LayerList2 folder by Notepad++;

  3. Register this custom widget

    1. In a browser window, sign in to your portal.
      Click My Content.
      Click Add Item and choose An application.
      Add custom widget
      Choose Application Extension (App Builder), and provide the URL to your manifest file.
      App Builder extension dialog box
      An example of a URL path to a manifest file is <server.domain.com>/<my widget>/manifest.json.

      Click the Title box.
      The title of your item will automatically populate from your manifest file. Optionally, you can manually edit the title.

      Add tags in the Tags box.
      Click Add Item.
      You custom widget is now available in My Content as an App Builder Extension type.

Reference:

Web AppBuilder Developer Edition

How to setup Web appbuilder on your local?

Use this link as reference, and only pick the portal setting:

https://developers.arcgis.com/web-appbuilder/guide/getstarted.htm

example of mine:

 

App Registration

Get the App ID:4IM9lrLUyfXAcgJg

How to build first App:

Build your first app

https://developers.arcgis.com/web-appbuilder/guide/build-your-first-app.htm

Create a widget folder structure

You can either use the Widget Generator in this Web AppBuilder generator tool, or complete the following steps to create a simple widget as your starting point.

Caution:

You may use the Web AppBuilder generator tool in this sample; however, it is not supported.

 

  1. Make a copy of the Demo folder at path/to/WAB/client/stemapp/ widgets/samplewidgets.

  2. Paste it to the widgets under stemapp or (stemapp3d if you're developing a widget for 3D apps).

  3. Rename the folder ListView.

  4. In manifest.json, update the widget’s general information, such as the name and author. The value of the name field should be the same as the widget folder name, in this case, ListView. And in the nls folder, update the value of the _widgetLabel variable to ListView in the strings.js files (you can remove unused i18n folders as needed).

     

    Note:See Add i18n support for more information on adding i18n support.

     

  5. Replace the widget icon.png file with a different image to use as the icon.

  6. Open Web AppBuilder and click New App.

    The ListView widget appears as a member of the widgets on the Choose Widget dialog box.