ArcGISAPIforJavaScriptArcGISAPIforJavaScript

CustomizingWidgetsCustomizingWidgetsMattDriscoll–JCFranco–

@driskull@arfncode

AgendaAgendaWhatcanbecustomizedCustomizationapproachesDemosQ&A

CustomizingWidgetsCustomizingWidgetsThemeView

CustomizingWidgetsCustomizingWidgetsTheme:StylesView:Structure/Functionality

CustomizationApproachesCustomizationApproaches

CustomizationApproachesCustomizationApproachesCustomizingatheme

Customstyles(colors,sizing,font...)

CustomizationApproachesCustomizationApproachesCustomizingatheme

Customstyles(colors,sizing,font...)Customizingawidgetview

CustomUI

PartI:ThemingPartI:Theming

WhyTheme?WhyTheme?

WhyTheme?WhyTheme?MatchbrandingMatchthemapContrastwiththemapUser-speci�crequirements(e.g.biggerbuttons)

EsriThemesEsriThemes10themesareprovidedout-of-the-box:

UsingathemerequiresonlyaslightupdatetotheCSSpath.

<link href="//js.arcgis.com/4.12/esri/themes/<theme-name>/main.css" />

Demo:ThemeSwitcherDemo:ThemeSwitcher

Out-of-the-boxthemes

CustomizingAPIstylingCustomizingAPIstylingAPICSSisusing methodologyforclassnames.

.my-widget__menu--openCanoverrideCSSselectors/usehigherspeci�city

Canbetedious/brittle

BEM

Sample

ThemingTechnologyThemingTechnology

Weuse

tocreateourCSS.tocreateourCSS.

Weuse

tocreateourCSS.tocreateourCSS.

| |sass-lang.com nodejs.org gruntjs.com

isapowerfulscriptinglanguageforcompilingCSS.isapowerfulscriptinglanguageforcompilingCSS.

isapowerfulscriptinglanguageforcompilingCSS.isapowerfulscriptinglanguageforcompilingCSS.ModularDRYMakesthemingeasy

ThemingStepsThemingSteps

ThemingStepsThemingSteps1.Getthemeutility2.Usetheutility3.Customizeyourtheme4.HostyourCSS�le

ThemingSetupThemingSetup

ThemingSetupThemingSetup1.Clonethe jsapi-styles.git2.Runnpm install3.Editsass/my-theme/main.scss4.Seedist/my-theme/main.css

themeutility

Step1Step1Clonethethemeutilityrepo

Step1Step1Clonethethemeutilityrepo

github.com/jcfranco/jsapi-styles

git clone https://github.com/jcfranco/jsapi-styles.git

Step2Step2npm install

Step2Step2npm install

InstallsthenecessarybitsCreatesasamplethemedirectoryCompilestheCSSfromtheSCSSSpinsupapreviewinyourdefaultbrowser

Step3Step3EdityourthemeEdityourtheme

sass/my-theme/main.scss

Step3Step3EdityourthemeEdityourtheme

sass/my-theme/main.scss

Optionally,edityourappOptionally,edityourapp

preview/index.html

Step4Step4Hostyourstylesheetandanyrelevantassets

Step4Step4Hostyourstylesheetandanyrelevantassets

Linkyourstylesheetinyourapp

<!-- In your app: --><link href="path/to/your/theme/main.css" />

ThemingGoalsThemingGoals

ThemingGoalsThemingGoalsThemeSmartThemeSmart

AvoidaddingadditionalCSSselectorsInstead,useSasstoyouradvantage

ThemeStructureThemeStructureLet'slookathowthecorethemeisstructured

ColorSizeType

ThemeStructureThemeStructureLet'slookathowthecorethemeisstructured

Color:color.scssSize:sizes.scssType:type.scss

ThemeStructureThemeStructureDefaultDefault

Anyvalueassignmentoverridesthe!defaultvalue.

// Inside base/_color_.scss$background-color: #fff !default;

// Inside sass/my-theme/main.scss$background-color: #e3000b;

ThemeStructureThemeStructureDefaultDefault

Anyvalueassignmentoverridesthe!defaultvalue.

Butwait...there'smore!

// Inside base/_color_.scss$background-color: #fff !default;

// Inside sass/my-theme/main.scss$background-color: #e3000b;

ThemeStructureThemeStructureOverridethecorecolorvariables...

$font-color: #fff; $interactive-font-color: #fff; $background-color: #e3000b; $button-color: #fff;

ThemeStructureThemeStructureOverridethecorecolorvariables...

...thenmagic!

$font-color: #fff; $interactive-font-color: #fff; $background-color: #e3000b; $button-color: #fff;

Magic*Magic*Using$button-colorwecansetadefaulthovercolor.

$button-color--hover: darken($button-color, 10%) !default; // ...etc

ThemingDocumentationThemingDocumentationAPIStylingGuide

StyleUtilityReadme

LetsmakeathemeLetsmakeatheme

LetsmakeathemeLetsmakeathemeBrandcolors

CustomThemeCustomThemeBlockyMcBricks:Fineminiatureplasticbricks

Demo:CustomThemeDemo:CustomThemePreviewStart

CustomThemeApp

DemoSteps

ThemingRecapThemingRecapUseSass&thethemeutilitytoyouradvantageThemestructure

ColorSizeTypography

Usethecorevariablesandoverridetheirvalues

PartII:CustomizingwidgetviewsPartII:Customizingwidgetviews

Widget=View+ViewModelWidget=View+ViewModel

Widget=View+ViewModelWidget=View+ViewModelPresentationisseparatefrombusinesslogic

ReusableUIreplacementFrameworkintegration

ViewsViews

ViewsViewsPresentationoftheWidgetUsesViewModelAPIstorendertheUIView-speci�clogicresideshereExtendsesri/widgets/Widget

Widget(Base)ClassWidget(Base)Classesri/widgets/Widget

Widget(Base)ClassWidget(Base)Classesri/widgets/Widget

ProvideslifecycleAPIconsistency

WidgetLifecycleWidgetLifecycle

WidgetLifecycleWidgetLifecycleconstructor()postInitialize()render()destroy()

render()render()

render()render()De�nesUIJSXReactstorenderableproperties(privateorpublic)VirtualDOM

WorkingwithViewsWorkingwithViewsAPIExploration

BookmarksDocBookmarksSample

CustomizingawidgetviewCustomizingawidgetviewBricki�ed™Bookmarkswidget

         

Demo:CustomizingawidgetviewDemo:CustomizingawidgetviewDemoStartDemoSteps

CustomizingawidgetviewrecapCustomizingawidgetviewrecap

CustomizingawidgetviewrecapCustomizingawidgetviewrecapWidget=View+ViewModel

ReusableUIreplacementFrameworkintegration

CustomizingawidgetviewrecapCustomizingawidgetviewrecapWidget=View+ViewModel

ReusableUIreplacementFrameworkintegration

ExtendedexistingwidgetLifecycleCustomrendering(overrides)

ConclusionConclusionThemedbychangingcolors,sizing,etc.Alteredpresentation(customUI)

RecommendedSessionsRecommendedSessionsArcGISAPIforJavaScript:TheRoadAheadBuildingWebAppswiththeArcGISAPIforJavaScript

AdditionalResourcesAdditionalResourcesImplementingAccessorSettingupTypeScriptWidgetDevelopmentJSAPISDK

ShareyourappsandsuggestionswithShareyourappsandsuggestionswithusus

CoolappsAPIfeedbackIdeasforthenextUC

jsapi_pm@esri.com

Questions?Questions?ForexampleForexample

�WherecanI�ndtheslides/source?

� �esriurl.com/customwidgetsuc2019

ThankYou!ThankYou!