Webappbuilder Customizing Widget templates

Webappbuilder Customizing Widget templates

by Li Yuanxiang

2. to the copy under \\widgets\samplewidgets directory customwidgettemplate file and rename it to mywidget

4. Sets the class name of the widget. Open Widget.js in the mywidget directory and change baseclass to

   baseclass: ' jimu-widget-mywidget ' as

2. Customize the UI interface for widgets. You can add an interface for its widgets in the widget.html file. You can try adding the following code to this HTML page.

4. Register your custom widget with your app. Open A stemapp/sample-configs file, locate widgetpool->widgets , Add a node content, and then save the file

6. Test widget. Open the Http://[your host Name:3344]/webappviewer/?config=sample-configs/config-demo.json   Click the icon and the icon appears, and the result is as follows

8. Let widgets become more flexible with

   A. Open mywidget   config.json file, Add json structure text to Chajian, as follows

   B. Change the original widget.html page code to allow it to read directly the configuration key variable

   c. Open the test connection for step 5th to view the modified content. The content of the widget becomes the variable corresponding to the config file.

    

10. Css/style.css file, add css code into the file as shown in:

12. Access Map
    1. Open the Widget.js file and delete the comment for the startup function

    2. Modify the Widget.html page code and add the map ID attribute, as

    3. Re-refresh the page to see the ID of the map space being realistic.
    4. The end result is that the ID of the map control in the app is read

13. Internationalization Support

    You can write a configuration file to fit multiple languages. For example, the plugin used earlier is a hint in English that the "This is my widget" and "This is configurable" can be written by Mywidget Folder configuration file to implement localization in Chinese.

    2. Open nls/strings.js file, add the following code

    4. in the In the nls directory Create subfolders ZH-CN,

    6. Copy the String.js to the ZH-CN folder
    8. Modify The contents of the Zh-cn/strings.js file are as follows

    10. Modify the contents of the widget.html to read the configuration code, as

    12. Re-refresh the page to see the configuration in Chinese. Effects such as

14. Deploying Widgets
    2. Open the  manifest.json  file, change properties inside, such as name , author , description name widget The folder name is the same.

       You can see a description of the URL https://developers.arcgis.com/web-appbuilder/guide/widget-manifest.htm for each of the specific properties.

    3. Copy the Mywidget folder to \stemapp\widgetsfolder, startnode. JS (The fastest Hong Kong-style is open directlyWebappbuiliderfolder under theStart.batfile), enterHttp://[your host Name:3344]/webappbuilder, so that when usingWebappbuilderWhen you create an app, you can use a customWidgetsup. When the widget is selected, a defined plug-in will appear

Webappbuilder Customizing Widget templates