5 Ways to Add a Finishing Touch to Your WAB App

The Web Map and Widgets are the foundation of creating apps in Web AppBuilder (WAB), but there are customizations you can make to add a finishing touch to your app and make it unique. Here are a few options:

1. Custom Color

Web AppBuilder for ArcGIS gives you some pre-determined options in the Theme panel for color styles. If you do not like the available options you can use a custom color. Click the "Set Custom Color" option under Style, and choose a color, or enter a color code. (Go to Color-Hex to obtain a code).

Choose a color from the palette, or enter the value of a color hex code.

If your organization has an official or standard color, you can style your app with that color. Navigate to the organization's website and use an Eye Dropper tool to obtain the color code. Most browsers have an Eye Dropper tool available as an extension.

 

2. Splash Screen

The Splash Screen (the Splash Widget) can be used to greet the user as the app opens. It can define the purpose and contents of the app, provide instructions to the user, or offer a legal disclaimer about the data. You can add an organization logo, change the appearance of the content, or require confirmation to continue.

 

 

 

 

3. Widget Placement

Widgets can be placed in the Header Controller/Side Controller (depending on the Theme), or in a placeholder within the map area of the app. You can also utilize both placement options in the app if you prefer. SWEET!

In this example, widgets are placed in both the header controller and in the on-screen placeholders.

4. Branding

 

Give your app the appropriate branding in the Attribute panel of Web AppBuilder. Here is where you can add your organization's logo and give the app a proper title. There are options available to change the size, font, and color of the title.

 

 

You can also add a link to your organization's website, or other site as deemed necessary.

 

 

 

 

5. Preview For Your Device

At the bottom of the Web AppBuilder configuration page there is a Previews option. From here you can preview how your app displays on a number of smart phone and tablet devices. If your users have a certain device, you can tailor the layout of the app to best fit that device. In the Preview window you can toggle between portrait and landscape layouts. There is also an option to scan a QR code to preview the app instantly on your device.