Tab Widget to follow Splash Screen - Web AppBuilder 2.x

Document created by william.miller_WarrenCoGIS on Dec 8, 2016Last modified by william.miller_WarrenCoGIS on Dec 14, 2016
Version 2Show Document
  • View in full screen mode

After initially trying to add a tab container to the Splash widget, I started working on a widget that would open after the user agrees to the terms and conditions on the Splash screen, but would also be accessible from the header controller later on in the program or if the Splash screen is bypassed altogether. The end result was a modified theme and a "Welcome" widget.

 

Much thanks goes to Robert Scheitlin, GISP for his generous help and ample patience.

Creating a document where this widget/theme hybrid would be more visible was suggested by Rebecca Strauch, GISP. Thank you.

 

The attached zip folders contain the following items for the WAB version indicated: eFoldableTheme, Welcome and Widget.js


Here is what to do once the zip file is downloaded and its files extracted:
(Note: ... represents the location of WebAppBuilderForArcGIS on your PC)

 

  1. Add the eFoldableTheme folder to ...\client\stemapp\themes
  2. Add the Welcome folder to ...\client\stemapp\widgets
  3. In the Welcome folder, go to the nls\strings.js file and add your own tab labels and contents. See notes in the code for further instructions.
  4. Once you have added your content, start Web AppBuilder and create a new app
  5. Select the eFoldableTheme, show the Splash screen and save the app
  6. Go to ...\server\apps\#ofTheAppYourJustCreated\widgets\Splash. Replace the existing Widget.js with the Widget.js from the zip file.
  7. To change the icon of the Welcome widget, go to Welcome\images and replace the icon.png with a different .png image and name it icon

 

With this solution, put any disclaimer in the Splash widget. Once the user clicks "OK", the Welcome widget opens. After "closing" the Welcome widget, it is still available in the header and can be opened later in the life of the web page.

 

Note: The following files in the eFoldableTheme were modified from FoldableTheme:

  • FoldableTheme\images\icon.png
  • FoldableTheme\layouts\default\config.json
  • FoldableTheme\layouts\layout2\config.json
  • FoldableTheme\layouts\layout4\config.json
  • FoldableTheme\nls\string.js
  • FoldableTheme\common.css
  • FoldableTheme\manifest.json

ModalPanel and all its contents were added to eFoldableTheme\panels. (The files with the -Orig suffix are the result of completing the Create a New Panel sample code tutorial and are not needed.)

 

The Welcome widget should work with any theme. However, it will only appear in the Modal Panel if you use the eFoldableTheme or make similar modifications to another theme for its inclusion. Here is a link that should help: Create a New Theme

 

The internationalization for the eFoldableTheme is only leftover from the FoldableTheme on which it is based. To use a language other than English, line 3 of eFoldableTheme\nls\LanguageFolder\string.js should be changed to add an 'e' or its equivalent to "Foldable Theme" so that the line translates back to English as

_themeLabel: "eFoldable Theme"

 

I don't know if this is necessary, but here is a disclaimer for the files I created or modified.

These files are provided "as is." (What you see is what you get.) I make no guarantees about their functionality or reliability. I will not be held liable for any loss incurred or damage caused by the use or inclusion of these files.

 

I hope people find this helpful.

William

9 people found this helpful

Attachments

Outcomes