├── .github └── workflows │ └── build-app.yml ├── README.md ├── apps └── 0 │ ├── config.json │ ├── info.json │ └── resources │ └── config │ └── config.json ├── manifest.json ├── themes └── demo-theme │ ├── README.md │ ├── manifest.json │ ├── style.ts │ ├── thumbnail.png │ ├── translations │ ├── default.ts │ └── zh-cn.js │ └── variables.json └── widgets └── add-layers ├── README.md ├── config.json ├── icon.svg ├── manifest.json └── src ├── config.ts ├── runtime ├── translations │ └── default.ts └── widget.tsx └── setting ├── setting.tsx └── translations └── default.ts /.github/workflows/build-app.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | 7 | jobs: 8 | Build-and-Deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Check out repository code 12 | uses: actions/checkout@v3 13 | - name: Download Experience Builder 14 | # WARNING: 15 | # THIS METHOD OF DOWNLOADING EXPERIENCE BUILDER MAY BREAK IF ESRI CHANGES HOW DOWNLOADS WORK IN THE FUTURE. 16 | # IN OTHER WORDS, IT COULD BREAK AT ANY TIME. 17 | # THERE IS NO WARRANTY OR GUARANTEE THAT THIS COMMAND WILL WORK IN THE FUTURE. 18 | # ONLY USE THIS COMMAND IF YOU UNDERSTAND HOW IT IS BEING USED AND ARE COMFORTABLE FIXING IT IF IT BREAKS: 19 | run: curl -o exb.zip "$(curl -s 'https://downloads.arcgis.com/dms/rest/download/secured/arcgis-experience-builder-1.17.zip?f=json&folder=software%2FExperienceBuilder%2F1.17' | python3 -c "import sys, json; print(json.load(sys.stdin)['url'])")" 20 | - name: Unzip Experience Builder 21 | run: unzip -q exb.zip -d exb 22 | - name: Copy Custom Widgets 23 | run: cp -r widgets/* exb/ArcGISExperienceBuilder/client/your-extensions/widgets 24 | - name: Copy Custom Themes 25 | run: cp -r themes/* exb/ArcGISExperienceBuilder/client/your-extensions/themes 26 | - name: Create App directory 27 | run: mkdir public && cd public && mkdir apps && cd apps 28 | working-directory: exb/ArcGISExperienceBuilder/server 29 | - name: Copy apps 30 | run: cp -r apps/* exb/ArcGISExperienceBuilder/server/public/apps 31 | - name: NPM install client folder 32 | run: npm ci 33 | working-directory: exb/ArcGISExperienceBuilder/client 34 | - name: NPM install in server folder 35 | run: npm ci 36 | working-directory: exb/ArcGISExperienceBuilder/server 37 | - name: Build widgets - dev 38 | run: npm run build:dev 39 | working-directory: exb/ArcGISExperienceBuilder/client 40 | - name: Build widgets 41 | run: npm run build:prod 42 | working-directory: exb/ArcGISExperienceBuilder/client 43 | - name: Run download script 44 | run: node -e "require('./server/src/middlewares/dev/apps/app-download.js').zipApp('0', 'app.zip')" 45 | working-directory: exb/ArcGISExperienceBuilder 46 | env: 47 | NODE_ENV: production 48 | - name: Unzip app zip 49 | # ExB has non-standard file permissions so use chmod after unzip 50 | run: | 51 | unzip -q app.zip -d app 52 | chmod -R 777 app 53 | working-directory: exb/ArcGISExperienceBuilder 54 | # - name: Generate screeenshot (optional) 55 | # working-directory: exb/ArcGISExperienceBuilder/app 56 | # continue-on-error: true 57 | # run: | 58 | # npm install --global pageres-cli 59 | # npm install --global serve 60 | # echo "{\"trailingSlash\":true}" > serve.json 61 | # serve . -p 5000 & 62 | # pageres http://localhost:5000/index.html 1024x768 --filename=screenshot --delay=15 63 | - name: Deploy app zip to GH Pages 64 | uses: JamesIves/github-pages-deploy-action@v4 65 | with: 66 | branch: gh-pages 67 | folder: exb/ArcGISExperienceBuilder/app 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ArcGIS Experience Builder Devops Example 2 | 3 | Use Experience Builder within a devops workflow to automatically build the app on commit. 4 | 5 | ## How it works 6 | 7 | 1. First it downloads the Experience Builder developer edition zip file using `curl`. 8 | 1. Then it unzips Experience Builder, does the NPM installs, copies the app directory into “server/public/apps/0”, copies the custom widgets. 9 | 1. Then it runs `app-download.js` (new in Experience Builder v1.6), which generates the export (deployable) zip. 10 | 1. Finally, it takes the deployable zip, unzips it, and publishes it 11 | 12 | The built app is deployed to GitHub Pages: https://gavinr-maps.github.io/experience-builder-devops-example/ 13 | 14 | More information on how the GitHub Action script generates the Experience Builder app export can be found [here](https://community.esri.com/t5/arcgis-experience-builder-blog/experience-builder-devops-generating-the-app/ba-p/1112247). 15 | 16 | This deployment strategy is not recommended for production apps, because the user may need to clear their browser cache in order to see web app changes. A workaround to required browser cache clearing is to add [these steps](https://developers.arcgis.com/experience-builder/guide/deployment-topics/#service-worker-cache) to your CI pipline (these steps are not covered in this repository's demo code). 17 | -------------------------------------------------------------------------------- /apps/0/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": { 3 | "home": { 4 | "type": "NORMAL", 5 | "mode": "FIT_WINDOW", 6 | "layout": { 7 | "LARGE": "layout_1", 8 | "SMALL": "layout_17", 9 | "MEDIUM": "layout_21" 10 | }, 11 | "isVisible": true, 12 | "isDefault": true, 13 | "id": "home", 14 | "header": false, 15 | "label": "Page 1" 16 | } 17 | }, 18 | "layouts": { 19 | "layout_1": { 20 | "type": "FIXED", 21 | "order": ["0", "1"], 22 | "content": { 23 | "0": { 24 | "type": "WIDGET", 25 | "bbox": { 26 | "left": "0px", 27 | "top": "0px", 28 | "width": "39.072%", 29 | "height": "60px", 30 | "right": "0px" 31 | }, 32 | "widgetId": "widget_1", 33 | "setting": { 34 | "autoProps": { 35 | "width": "STRETCH" 36 | } 37 | } 38 | }, 39 | "1": { 40 | "type": "WIDGET", 41 | "bbox": { 42 | "left": "0px", 43 | "top": "60px", 44 | "width": "78.1441%", 45 | "height": "52.1173%", 46 | "right": "0px", 47 | "bottom": "0px" 48 | }, 49 | "widgetId": "widget_6", 50 | "setting": { 51 | "autoProps": { 52 | "height": "STRETCH", 53 | "width": "STRETCH" 54 | } 55 | } 56 | } 57 | } 58 | }, 59 | "layout_2": { 60 | "type": "FIXED", 61 | "order": ["1", "3"], 62 | "content": { 63 | "1": { 64 | "type": "WIDGET", 65 | "bbox": { 66 | "left": "20.00px", 67 | "top": "50%", 68 | "width": "291px", 69 | "height": "42px", 70 | "bottom": "0px" 71 | }, 72 | "widgetId": "widget_3", 73 | "setting": { 74 | "vCenter": true, 75 | "hCenter": false, 76 | "autoProps": { 77 | "top": false, 78 | "bottom": true 79 | } 80 | } 81 | }, 82 | "3": { 83 | "type": "WIDGET", 84 | "bbox": { 85 | "left": "728px", 86 | "top": "0px", 87 | "width": "300px", 88 | "height": "50px", 89 | "right": "0px", 90 | "bottom": "0px" 91 | }, 92 | "widgetId": "widget_5", 93 | "setting": { 94 | "autoProps": { 95 | "left": true, 96 | "height": "STRETCH" 97 | } 98 | } 99 | } 100 | }, 101 | "label": "Default" 102 | }, 103 | "layout_3": { 104 | "type": "FIXED", 105 | "order": ["0", "1"], 106 | "content": { 107 | "0": { 108 | "type": "WIDGET", 109 | "bbox": {}, 110 | "widgetId": "widget_14" 111 | }, 112 | "1": { 113 | "type": "WIDGET", 114 | "bbox": {}, 115 | "widgetId": "widget_15" 116 | } 117 | }, 118 | "label": "Controller layout" 119 | }, 120 | "layout_4": { 121 | "type": "FIXED", 122 | "order": ["0", "1"], 123 | "content": { 124 | "0": { 125 | "type": "WIDGET", 126 | "bbox": {}, 127 | "widgetId": "widget_14" 128 | }, 129 | "1": { 130 | "type": "WIDGET", 131 | "bbox": {}, 132 | "widgetId": "widget_15" 133 | } 134 | }, 135 | "label": "Controller layout" 136 | }, 137 | "layout_5": { 138 | "content": { 139 | "0": { 140 | "type": "WIDGET", 141 | "widgetId": "widget_14", 142 | "bbox": { 143 | "left": 0, 144 | "top": 0, 145 | "bottom": 0, 146 | "right": 0 147 | } 148 | } 149 | }, 150 | "order": ["0"], 151 | "label": "Open widget layout" 152 | }, 153 | "layout_6": { 154 | "content": { 155 | "0": { 156 | "type": "WIDGET", 157 | "bbox": { 158 | "left": 0, 159 | "top": 0, 160 | "bottom": 0, 161 | "right": 0 162 | } 163 | } 164 | }, 165 | "order": ["0"], 166 | "label": "Open widget layout" 167 | }, 168 | "layout_7": { 169 | "type": "FIXED", 170 | "order": ["0"], 171 | "content": { 172 | "0": { 173 | "type": "WIDGET", 174 | "bbox": { 175 | "left": 0, 176 | "top": 0, 177 | "width": "298px", 178 | "height": "350px", 179 | "right": 0, 180 | "bottom": 0 181 | }, 182 | "widgetId": "widget_18", 183 | "setting": { 184 | "autoProps": { 185 | "left": false, 186 | "right": false, 187 | "width": "STRETCH", 188 | "top": false, 189 | "bottom": false, 190 | "height": "STRETCH" 191 | } 192 | } 193 | } 194 | }, 195 | "label": "First" 196 | }, 197 | "layout_14": { 198 | "type": "FIXED", 199 | "order": ["0"], 200 | "content": { 201 | "0": { 202 | "type": "WIDGET", 203 | "bbox": { 204 | "left": 0, 205 | "top": 0, 206 | "width": "356px", 207 | "height": "298px", 208 | "right": 0, 209 | "bottom": 0 210 | }, 211 | "widgetId": "widget_11", 212 | "setting": { 213 | "autoProps": { 214 | "left": false, 215 | "right": false, 216 | "width": "STRETCH", 217 | "top": false, 218 | "bottom": false, 219 | "height": "STRETCH" 220 | }, 221 | "vCenter": false, 222 | "hCenter": false 223 | }, 224 | "isPending": false 225 | } 226 | }, 227 | "label": "Second" 228 | }, 229 | "layout_15": { 230 | "type": "FIXED", 231 | "label": "Map FixedLayout" 232 | }, 233 | "layout_16": { 234 | "type": "FIXED", 235 | "label": "Map FixedLayout" 236 | }, 237 | "layout_17": { 238 | "type": "FIXED", 239 | "content": { 240 | "0": { 241 | "type": "WIDGET", 242 | "bbox": { 243 | "left": "0px", 244 | "top": "0px", 245 | "width": "39.072%", 246 | "height": "60px", 247 | "right": "0px" 248 | }, 249 | "widgetId": "widget_12", 250 | "setting": { 251 | "autoProps": { 252 | "width": "STRETCH" 253 | } 254 | } 255 | }, 256 | "1": { 257 | "type": "WIDGET", 258 | "bbox": { 259 | "left": "0px", 260 | "top": "60px", 261 | "width": "78.1441%", 262 | "height": "52.1173%", 263 | "right": "0px", 264 | "bottom": "0px" 265 | }, 266 | "widgetId": "widget_13", 267 | "setting": { 268 | "autoProps": { 269 | "height": "STRETCH", 270 | "width": "STRETCH" 271 | } 272 | } 273 | } 274 | }, 275 | "order": ["0", "1"] 276 | }, 277 | "layout_18": { 278 | "type": "FIXED", 279 | "content": { 280 | "1": { 281 | "type": "WIDGET", 282 | "bbox": { 283 | "left": "82px", 284 | "top": "2px", 285 | "width": "291px", 286 | "height": "50px", 287 | "bottom": "0px" 288 | }, 289 | "widgetId": "widget_3", 290 | "setting": { 291 | "hCenter": false, 292 | "autoProps": { 293 | "height": "STRETCH" 294 | } 295 | }, 296 | "isPending": true 297 | }, 298 | "3": { 299 | "type": "WIDGET", 300 | "bbox": { 301 | "left": "243px", 302 | "top": "0px", 303 | "width": "200px", 304 | "height": "50px", 305 | "right": "0px", 306 | "bottom": "0px" 307 | }, 308 | "widgetId": "widget_5", 309 | "setting": { 310 | "autoProps": { 311 | "left": true, 312 | "height": "STRETCH" 313 | }, 314 | "vCenter": false, 315 | "hCenter": false 316 | }, 317 | "isPending": false 318 | } 319 | }, 320 | "order": ["1", "3"], 321 | "label": "Default" 322 | }, 323 | "layout_19": { 324 | "type": "FIXED", 325 | "content": { 326 | "1": { 327 | "type": "WIDGET", 328 | "setting": { 329 | "style": {}, 330 | "autoProps": { 331 | "left": false, 332 | "right": false, 333 | "width": "STRETCH", 334 | "top": false, 335 | "bottom": false, 336 | "height": "STRETCH" 337 | } 338 | }, 339 | "bbox": { 340 | "left": 0, 341 | "top": 0, 342 | "width": "356px", 343 | "height": "298px", 344 | "right": 0, 345 | "bottom": 0 346 | }, 347 | "widgetId": "widget_10", 348 | "isPending": true 349 | }, 350 | "2": { 351 | "type": "WIDGET", 352 | "bbox": { 353 | "left": "0", 354 | "top": "0", 355 | "right": "0", 356 | "bottom": "0" 357 | }, 358 | "widgetId": "widget_11", 359 | "setting": { 360 | "autoProps": { 361 | "width": "STRETCH", 362 | "height": "STRETCH" 363 | } 364 | } 365 | } 366 | }, 367 | "order": ["1", "2"], 368 | "label": "First" 369 | }, 370 | "layout_20": { 371 | "type": "FIXED", 372 | "content": {}, 373 | "order": [], 374 | "label": "Second" 375 | }, 376 | "layout_21": { 377 | "type": "FIXED", 378 | "content": { 379 | "0": { 380 | "type": "WIDGET", 381 | "bbox": { 382 | "left": "0px", 383 | "top": "0px", 384 | "width": "39.072%", 385 | "height": "60px", 386 | "right": "0px" 387 | }, 388 | "widgetId": "widget_16", 389 | "setting": { 390 | "autoProps": { 391 | "width": "STRETCH" 392 | } 393 | } 394 | }, 395 | "1": { 396 | "type": "WIDGET", 397 | "bbox": { 398 | "left": "0px", 399 | "top": "60px", 400 | "width": "78.1441%", 401 | "height": "52.1173%", 402 | "right": "0px", 403 | "bottom": "0px" 404 | }, 405 | "widgetId": "widget_17", 406 | "setting": { 407 | "autoProps": { 408 | "height": "STRETCH", 409 | "width": "STRETCH" 410 | } 411 | } 412 | } 413 | }, 414 | "order": ["0", "1"] 415 | }, 416 | "layout_22": { 417 | "type": "FIXED", 418 | "content": { 419 | "1": { 420 | "type": "WIDGET", 421 | "bbox": { 422 | "left": "82px", 423 | "top": "50%", 424 | "width": "291px", 425 | "height": "42px", 426 | "bottom": "0px" 427 | }, 428 | "widgetId": "widget_3", 429 | "setting": { 430 | "vCenter": true, 431 | "hCenter": false, 432 | "autoProps": { 433 | "top": false, 434 | "bottom": true 435 | } 436 | } 437 | }, 438 | "3": { 439 | "type": "WIDGET", 440 | "bbox": { 441 | "left": "370px", 442 | "top": 0, 443 | "width": "230px", 444 | "height": "60px", 445 | "right": 0, 446 | "bottom": 0 447 | }, 448 | "widgetId": "widget_5", 449 | "setting": { 450 | "autoProps": { 451 | "left": true, 452 | "height": "STRETCH" 453 | } 454 | } 455 | } 456 | }, 457 | "order": ["1", "3"], 458 | "label": "Default" 459 | }, 460 | "layout_23": { 461 | "type": "FIXED", 462 | "content": { 463 | "0": { 464 | "type": "WIDGET", 465 | "bbox": {}, 466 | "widgetId": "widget_14" 467 | }, 468 | "1": { 469 | "type": "WIDGET", 470 | "bbox": {}, 471 | "widgetId": "widget_15" 472 | } 473 | }, 474 | "order": ["0", "1"], 475 | "label": "Controller layout" 476 | }, 477 | "layout_24": { 478 | "content": { 479 | "0": { 480 | "type": "WIDGET", 481 | "widgetId": "widget_14", 482 | "bbox": { 483 | "left": 0, 484 | "top": 0, 485 | "bottom": 0, 486 | "right": 0 487 | } 488 | } 489 | }, 490 | "order": ["0"], 491 | "label": "Open widget layout" 492 | }, 493 | "layout_25": { 494 | "type": "FIXED", 495 | "content": {}, 496 | "order": [], 497 | "label": "First" 498 | }, 499 | "layout_29": { 500 | "type": "FIXED", 501 | "content": { 502 | "0": { 503 | "type": "WIDGET", 504 | "bbox": { 505 | "left": 0, 506 | "top": 0, 507 | "width": "356px", 508 | "height": "298px", 509 | "right": 0, 510 | "bottom": 0 511 | }, 512 | "widgetId": "widget_11", 513 | "setting": { 514 | "autoProps": { 515 | "left": false, 516 | "right": false, 517 | "width": "STRETCH", 518 | "top": false, 519 | "bottom": false, 520 | "height": "STRETCH" 521 | } 522 | } 523 | } 524 | }, 525 | "order": ["0"], 526 | "label": "Second" 527 | }, 528 | "layout_30": { 529 | "type": "FIXED", 530 | "label": "Map FixedLayout" 531 | } 532 | }, 533 | "widgets": { 534 | "widget_1": { 535 | "id": "widget_1", 536 | "uri": "widgets/layout/fixed/", 537 | "config": {}, 538 | "style": { 539 | "background": { 540 | "image": { 541 | "url": "" 542 | }, 543 | "color": "var(--primary-600)" 544 | }, 545 | "boxShadow": { 546 | "offsetX": { 547 | "distance": 0, 548 | "unit": "px" 549 | }, 550 | "offsetY": { 551 | "distance": 2, 552 | "unit": "px" 553 | }, 554 | "blur": { 555 | "distance": 4, 556 | "unit": "px" 557 | }, 558 | "spread": { 559 | "distance": 0, 560 | "unit": "px" 561 | }, 562 | "color": "rgba(0,0,0,0.5)" 563 | } 564 | }, 565 | "layouts": { 566 | "DEFAULT": { 567 | "LARGE": "layout_2" 568 | } 569 | }, 570 | "version": "1.10.0", 571 | "label": "Fixed Panel 1" 572 | }, 573 | "widget_3": { 574 | "id": "widget_3", 575 | "uri": "widgets/common/text/", 576 | "config": { 577 | "text": "

Experience Builder Dev Summit

", 578 | "style": { 579 | "verticalAlign": "center", 580 | "wrap": true, 581 | "overflow": "scroll", 582 | "padding": "p-1" 583 | } 584 | }, 585 | "version": "1.10.0", 586 | "label": "Text 1" 587 | }, 588 | "widget_5": { 589 | "id": "widget_5", 590 | "uri": "widgets/common/controller/", 591 | "config": { 592 | "behavior": { 593 | "onlyOpenOne": true, 594 | "displayType": "STACK", 595 | "vertical": false, 596 | "size": {} 597 | }, 598 | "appearance": { 599 | "space": 0, 600 | "advanced": false, 601 | "card": { 602 | "showLabel": false, 603 | "labelGrowth": 10, 604 | "avatar": { 605 | "type": "primary", 606 | "size": "default", 607 | "shape": "rectangle" 608 | }, 609 | "showTooltip": true 610 | } 611 | } 612 | }, 613 | "layouts": { 614 | "controller": { 615 | "LARGE": "layout_3", 616 | "SMALL": "layout_4", 617 | "MEDIUM": "layout_23" 618 | }, 619 | "_openwidget": { 620 | "LARGE": "layout_5", 621 | "SMALL": "layout_6", 622 | "MEDIUM": "layout_24" 623 | } 624 | }, 625 | "widgets": ["widget_14", "widget_15"], 626 | "version": "1.10.0", 627 | "label": "Widget Controller 1" 628 | }, 629 | "widget_6": { 630 | "id": "widget_6", 631 | "uri": "widgets/layout/sidebar/", 632 | "config": { 633 | "direction": "HORIZONTAL", 634 | "collapseSide": "FIRST", 635 | "overlay": false, 636 | "size": "398px", 637 | "divider": { 638 | "visible": true 639 | }, 640 | "resizable": true, 641 | "toggleBtn": { 642 | "visible": true, 643 | "icon": "LEFT", 644 | "offsetX": 15, 645 | "offsetY": 0, 646 | "position": "CENTER", 647 | "iconSize": 14, 648 | "width": 15, 649 | "height": 40, 650 | "color": { 651 | "normal": { 652 | "icon": { 653 | "useTheme": true, 654 | "color": "var(--primary-700)" 655 | }, 656 | "bg": { 657 | "useTheme": true, 658 | "color": "var(--light-400)", 659 | "opacity": 0.6 660 | } 661 | }, 662 | "hover": { 663 | "bg": { 664 | "useTheme": true, 665 | "color": "var(--light-400)" 666 | } 667 | } 668 | }, 669 | "expandStyle": { 670 | "style": { 671 | "borderRadius": "0 4px 4px 0" 672 | } 673 | }, 674 | "collapseStyle": { 675 | "style": { 676 | "borderRadius": "0 4px 4px 0" 677 | } 678 | }, 679 | "template": "rect" 680 | }, 681 | "defaultState": 1 682 | }, 683 | "layouts": { 684 | "FIRST": { 685 | "LARGE": "layout_7" 686 | }, 687 | "SECOND": { 688 | "LARGE": "layout_14" 689 | } 690 | }, 691 | "version": "1.10.0", 692 | "label": "Sidebar 1" 693 | }, 694 | "widget_10": { 695 | "id": "widget_10", 696 | "uri": "widgets/common/text/", 697 | "config": { 698 | "text": "", 699 | "placeholder": "

Double click to edit text

", 700 | "style": { 701 | "verticalAlign": "start", 702 | "wrap": true, 703 | "overflow": "scroll", 704 | "padding": "p-1" 705 | } 706 | }, 707 | "version": "1.5.0", 708 | "label": "Text 4" 709 | }, 710 | "widget_11": { 711 | "id": "widget_11", 712 | "uri": "widgets/arcgis/arcgis-map/", 713 | "config": { 714 | "toolConifg": { 715 | "canZoom": true, 716 | "canHome": true, 717 | "canSearch": true 718 | }, 719 | "isUseCustomMapState": true, 720 | "initialMapState": { 721 | "viewPoint": { 722 | "rotation": 0, 723 | "scale": 18489297.737236, 724 | "targetGeometry": { 725 | "spatialReference": { 726 | "wkid": 102100 727 | }, 728 | "x": -10970311.977193125, 729 | "y": 4800743.33460336 730 | } 731 | }, 732 | "extent": { 733 | "spatialReference": { 734 | "wkid": 102100 735 | }, 736 | "xmin": -12795016.716416366, 737 | "ymin": 3269556.783995116, 738 | "xmax": -9145607.237969883, 739 | "ymax": 6331929.885211604 740 | }, 741 | "rotation": 0, 742 | "viewType": "2d" 743 | } 744 | }, 745 | "layouts": { 746 | "MapFixedLayout": { 747 | "LARGE": "layout_15", 748 | "SMALL": "layout_16", 749 | "MEDIUM": "layout_30" 750 | } 751 | }, 752 | "version": "1.10.0", 753 | "label": "Map 1" 754 | }, 755 | "widget_12": { 756 | "id": "widget_12", 757 | "uri": "widgets/layout/fixed/", 758 | "config": {}, 759 | "style": { 760 | "background": { 761 | "image": { 762 | "url": "" 763 | }, 764 | "color": "var(--primary)" 765 | }, 766 | "boxShadow": { 767 | "offsetX": { 768 | "distance": 0, 769 | "unit": "px" 770 | }, 771 | "offsetY": { 772 | "distance": 2, 773 | "unit": "px" 774 | }, 775 | "blur": { 776 | "distance": 4, 777 | "unit": "px" 778 | }, 779 | "spread": { 780 | "distance": 0, 781 | "unit": "px" 782 | }, 783 | "color": "rgba(0,0,0,0.5)" 784 | } 785 | }, 786 | "layouts": { 787 | "DEFAULT": { 788 | "SMALL": "layout_18" 789 | } 790 | }, 791 | "version": "1.5.0", 792 | "label": "Fixed Panel 2" 793 | }, 794 | "widget_13": { 795 | "id": "widget_13", 796 | "uri": "widgets/layout/sidebar/", 797 | "config": { 798 | "direction": "VERTICAL", 799 | "collapseSide": "SECOND", 800 | "overlay": false, 801 | "size": "140px", 802 | "divider": { 803 | "visible": true 804 | }, 805 | "resizable": true, 806 | "toggleBtn": { 807 | "visible": true, 808 | "icon": "DOWN", 809 | "offsetX": 0, 810 | "offsetY": -15, 811 | "position": "CENTER", 812 | "iconSize": 14, 813 | "width": 40, 814 | "height": 15, 815 | "color": { 816 | "normal": { 817 | "icon": { 818 | "useTheme": true, 819 | "color": "colors.primary" 820 | }, 821 | "bg": { 822 | "useTheme": true, 823 | "color": "var(--light-400)", 824 | "opacity": 0.6 825 | } 826 | }, 827 | "hover": { 828 | "bg": { 829 | "useTheme": true, 830 | "color": "var(--light-400)" 831 | } 832 | } 833 | }, 834 | "expandStyle": { 835 | "style": { 836 | "borderRadius": "4px 4px 0 0" 837 | } 838 | }, 839 | "collapseStyle": { 840 | "style": { 841 | "borderRadius": "4px 4px 0 0" 842 | } 843 | }, 844 | "template": "rect" 845 | }, 846 | "defaultState": 1 847 | }, 848 | "layouts": { 849 | "FIRST": { 850 | "SMALL": "layout_19" 851 | }, 852 | "SECOND": { 853 | "SMALL": "layout_20" 854 | } 855 | }, 856 | "version": "1.5.0", 857 | "label": "Sidebar 2" 858 | }, 859 | "widget_14": { 860 | "id": "widget_14", 861 | "uri": "widgets/arcgis/map-layers/", 862 | "config": { 863 | "useMapWidget": true 864 | }, 865 | "useMapWidgetIds": ["widget_11"], 866 | "version": "1.5.0", 867 | "label": "Map Layers 1" 868 | }, 869 | "widget_15": { 870 | "id": "widget_15", 871 | "uri": "widgets/arcgis/legend/", 872 | "config": {}, 873 | "useMapWidgetIds": ["widget_11"], 874 | "version": "1.5.0", 875 | "label": "Legend 1" 876 | }, 877 | "widget_16": { 878 | "id": "widget_16", 879 | "uri": "widgets/layout/fixed/", 880 | "config": {}, 881 | "style": { 882 | "background": { 883 | "image": { 884 | "url": "" 885 | }, 886 | "color": "var(--primary)" 887 | }, 888 | "boxShadow": { 889 | "offsetX": { 890 | "distance": 0, 891 | "unit": "px" 892 | }, 893 | "offsetY": { 894 | "distance": 2, 895 | "unit": "px" 896 | }, 897 | "blur": { 898 | "distance": 4, 899 | "unit": "px" 900 | }, 901 | "spread": { 902 | "distance": 0, 903 | "unit": "px" 904 | }, 905 | "color": "rgba(0,0,0,0.5)" 906 | } 907 | }, 908 | "layouts": { 909 | "DEFAULT": { 910 | "MEDIUM": "layout_22" 911 | } 912 | }, 913 | "version": "1.5.0", 914 | "label": "Fixed Panel 3" 915 | }, 916 | "widget_17": { 917 | "id": "widget_17", 918 | "uri": "widgets/layout/sidebar/", 919 | "config": { 920 | "direction": "HORIZONTAL", 921 | "collapseSide": "FIRST", 922 | "overlay": false, 923 | "size": "398px", 924 | "divider": { 925 | "visible": true 926 | }, 927 | "resizable": true, 928 | "toggleBtn": { 929 | "visible": true, 930 | "icon": "LEFT", 931 | "offsetX": 15, 932 | "offsetY": 0, 933 | "position": "CENTER", 934 | "iconSize": 14, 935 | "width": 15, 936 | "height": 40, 937 | "color": { 938 | "normal": { 939 | "icon": { 940 | "useTheme": true, 941 | "color": "var(--primary-700)" 942 | }, 943 | "bg": { 944 | "useTheme": true, 945 | "color": "var(--light-400)", 946 | "opacity": 0.6 947 | } 948 | }, 949 | "hover": { 950 | "bg": { 951 | "useTheme": true, 952 | "color": "var(--light-400)" 953 | } 954 | } 955 | }, 956 | "expandStyle": { 957 | "style": { 958 | "borderRadius": "0 4px 4px 0" 959 | } 960 | }, 961 | "collapseStyle": { 962 | "style": { 963 | "borderRadius": "0 4px 4px 0" 964 | } 965 | }, 966 | "template": "rect" 967 | }, 968 | "defaultState": 1 969 | }, 970 | "layouts": { 971 | "FIRST": { 972 | "MEDIUM": "layout_25" 973 | }, 974 | "SECOND": { 975 | "MEDIUM": "layout_29" 976 | } 977 | }, 978 | "version": "1.5.0", 979 | "label": "Sidebar 3" 980 | }, 981 | "widget_18": { 982 | "uri": "widgets/add-layers/", 983 | "version": "1.10.0", 984 | "label": "add-layers 1", 985 | "config": { 986 | "zoomToLayer": true 987 | }, 988 | "id": "widget_18", 989 | "useMapWidgetIds": ["widget_11"] 990 | } 991 | }, 992 | "exbVersion": "1.10.0", 993 | "mainSizeMode": "LARGE", 994 | "theme": "themes/demo-theme/", 995 | "forBuilderAttributes": { 996 | "lockLayout": false 997 | }, 998 | "template": "jewelrybox", 999 | "widgetsManifest": {}, 1000 | "views": {}, 1001 | "sections": {}, 1002 | "dataSources": {}, 1003 | "messageConfigs": {}, 1004 | "pageStructure": [ 1005 | { 1006 | "home": [] 1007 | } 1008 | ], 1009 | "timestamp": 1643069624185, 1010 | "attributes": { 1011 | "portalUrl": "https://prof-services.maps.arcgis.com" 1012 | }, 1013 | "customTheme": {}, 1014 | "dialogs": {}, 1015 | "sharedThemeVariables": { 1016 | "header": {}, 1017 | "body": {}, 1018 | "button": {}, 1019 | "logo": { 1020 | "small": null, 1021 | "link": null 1022 | } 1023 | } 1024 | } 1025 | -------------------------------------------------------------------------------- /apps/0/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "created": 1643047533274, 3 | "description": "", 4 | "id": "1", 5 | "modified": 1643047633218, 6 | "owner": "GRehkemper@esri.com_prof_services", 7 | "tags": [], 8 | "thumbnail": null, 9 | "title": "Add Layers", 10 | "type": "Web Experience", 11 | "snippet": "", 12 | "typeKeywords": [ 13 | "EXB Experience", 14 | "Ready To Use", 15 | "JavaScript", 16 | "status: Published", 17 | "version:1.10.0" 18 | ], 19 | "portalUrl": "https://prof-services.maps.arcgis.com", 20 | "username": "GRehkemper@esri.com_prof_services", 21 | "url": null 22 | } 23 | -------------------------------------------------------------------------------- /apps/0/resources/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": { 3 | "home": { 4 | "type": "NORMAL", 5 | "mode": "FIT_WINDOW", 6 | "layout": { 7 | "LARGE": "layout_1", 8 | "SMALL": "layout_17", 9 | "MEDIUM": "layout_21" 10 | }, 11 | "isVisible": true, 12 | "isDefault": true, 13 | "id": "home", 14 | "header": false, 15 | "label": "Page 1" 16 | } 17 | }, 18 | "layouts": { 19 | "layout_1": { 20 | "type": "FIXED", 21 | "order": ["0", "1"], 22 | "content": { 23 | "0": { 24 | "type": "WIDGET", 25 | "bbox": { 26 | "left": "0px", 27 | "top": "0px", 28 | "width": "39.072%", 29 | "height": "60px", 30 | "right": "0px" 31 | }, 32 | "widgetId": "widget_1", 33 | "setting": { 34 | "autoProps": { 35 | "width": "STRETCH" 36 | } 37 | } 38 | }, 39 | "1": { 40 | "type": "WIDGET", 41 | "bbox": { 42 | "left": "0px", 43 | "top": "60px", 44 | "width": "78.1441%", 45 | "height": "52.1173%", 46 | "right": "0px", 47 | "bottom": "0px" 48 | }, 49 | "widgetId": "widget_6", 50 | "setting": { 51 | "autoProps": { 52 | "height": "STRETCH", 53 | "width": "STRETCH" 54 | } 55 | } 56 | } 57 | } 58 | }, 59 | "layout_2": { 60 | "type": "FIXED", 61 | "order": ["1", "3"], 62 | "content": { 63 | "1": { 64 | "type": "WIDGET", 65 | "bbox": { 66 | "left": "20.00px", 67 | "top": "50%", 68 | "width": "291px", 69 | "height": "42px", 70 | "bottom": "0px" 71 | }, 72 | "widgetId": "widget_3", 73 | "setting": { 74 | "vCenter": true, 75 | "hCenter": false, 76 | "autoProps": { 77 | "top": false, 78 | "bottom": true 79 | } 80 | } 81 | }, 82 | "3": { 83 | "type": "WIDGET", 84 | "bbox": { 85 | "left": "728px", 86 | "top": "0px", 87 | "width": "300px", 88 | "height": "50px", 89 | "right": "0px", 90 | "bottom": "0px" 91 | }, 92 | "widgetId": "widget_5", 93 | "setting": { 94 | "autoProps": { 95 | "left": true, 96 | "height": "STRETCH" 97 | } 98 | } 99 | } 100 | }, 101 | "label": "Default" 102 | }, 103 | "layout_3": { 104 | "type": "FIXED", 105 | "order": ["0", "1"], 106 | "content": { 107 | "0": { 108 | "type": "WIDGET", 109 | "bbox": {}, 110 | "widgetId": "widget_14" 111 | }, 112 | "1": { 113 | "type": "WIDGET", 114 | "bbox": {}, 115 | "widgetId": "widget_15" 116 | } 117 | }, 118 | "label": "Controller layout" 119 | }, 120 | "layout_4": { 121 | "type": "FIXED", 122 | "order": ["0", "1"], 123 | "content": { 124 | "0": { 125 | "type": "WIDGET", 126 | "bbox": {}, 127 | "widgetId": "widget_14" 128 | }, 129 | "1": { 130 | "type": "WIDGET", 131 | "bbox": {}, 132 | "widgetId": "widget_15" 133 | } 134 | }, 135 | "label": "Controller layout" 136 | }, 137 | "layout_5": { 138 | "content": { 139 | "0": { 140 | "type": "WIDGET", 141 | "widgetId": "widget_14", 142 | "bbox": { 143 | "left": 0, 144 | "top": 0, 145 | "bottom": 0, 146 | "right": 0 147 | } 148 | } 149 | }, 150 | "order": ["0"], 151 | "label": "Open widget layout" 152 | }, 153 | "layout_6": { 154 | "content": { 155 | "0": { 156 | "type": "WIDGET", 157 | "bbox": { 158 | "left": 0, 159 | "top": 0, 160 | "bottom": 0, 161 | "right": 0 162 | } 163 | } 164 | }, 165 | "order": ["0"], 166 | "label": "Open widget layout" 167 | }, 168 | "layout_7": { 169 | "type": "FIXED", 170 | "order": ["0"], 171 | "content": { 172 | "0": { 173 | "type": "WIDGET", 174 | "bbox": { 175 | "left": 0, 176 | "top": 0, 177 | "width": "298px", 178 | "height": "350px", 179 | "right": 0, 180 | "bottom": 0 181 | }, 182 | "widgetId": "widget_18", 183 | "setting": { 184 | "autoProps": { 185 | "left": false, 186 | "right": false, 187 | "width": "STRETCH", 188 | "top": false, 189 | "bottom": false, 190 | "height": "STRETCH" 191 | } 192 | } 193 | } 194 | }, 195 | "label": "First" 196 | }, 197 | "layout_14": { 198 | "type": "FIXED", 199 | "order": ["0"], 200 | "content": { 201 | "0": { 202 | "type": "WIDGET", 203 | "bbox": { 204 | "left": 0, 205 | "top": 0, 206 | "width": "356px", 207 | "height": "298px", 208 | "right": 0, 209 | "bottom": 0 210 | }, 211 | "widgetId": "widget_11", 212 | "setting": { 213 | "autoProps": { 214 | "left": false, 215 | "right": false, 216 | "width": "STRETCH", 217 | "top": false, 218 | "bottom": false, 219 | "height": "STRETCH" 220 | }, 221 | "vCenter": false, 222 | "hCenter": false 223 | }, 224 | "isPending": false 225 | } 226 | }, 227 | "label": "Second" 228 | }, 229 | "layout_15": { 230 | "type": "FIXED", 231 | "label": "Map FixedLayout" 232 | }, 233 | "layout_16": { 234 | "type": "FIXED", 235 | "label": "Map FixedLayout" 236 | }, 237 | "layout_17": { 238 | "type": "FIXED", 239 | "content": { 240 | "0": { 241 | "type": "WIDGET", 242 | "bbox": { 243 | "left": "0px", 244 | "top": "0px", 245 | "width": "39.072%", 246 | "height": "60px", 247 | "right": "0px" 248 | }, 249 | "widgetId": "widget_12", 250 | "setting": { 251 | "autoProps": { 252 | "width": "STRETCH" 253 | } 254 | } 255 | }, 256 | "1": { 257 | "type": "WIDGET", 258 | "bbox": { 259 | "left": "0px", 260 | "top": "60px", 261 | "width": "78.1441%", 262 | "height": "52.1173%", 263 | "right": "0px", 264 | "bottom": "0px" 265 | }, 266 | "widgetId": "widget_13", 267 | "setting": { 268 | "autoProps": { 269 | "height": "STRETCH", 270 | "width": "STRETCH" 271 | } 272 | } 273 | } 274 | }, 275 | "order": ["0", "1"] 276 | }, 277 | "layout_18": { 278 | "type": "FIXED", 279 | "content": { 280 | "1": { 281 | "type": "WIDGET", 282 | "bbox": { 283 | "left": "82px", 284 | "top": "2px", 285 | "width": "291px", 286 | "height": "50px", 287 | "bottom": "0px" 288 | }, 289 | "widgetId": "widget_3", 290 | "setting": { 291 | "hCenter": false, 292 | "autoProps": { 293 | "height": "STRETCH" 294 | } 295 | }, 296 | "isPending": true 297 | }, 298 | "3": { 299 | "type": "WIDGET", 300 | "bbox": { 301 | "left": "243px", 302 | "top": "0px", 303 | "width": "200px", 304 | "height": "50px", 305 | "right": "0px", 306 | "bottom": "0px" 307 | }, 308 | "widgetId": "widget_5", 309 | "setting": { 310 | "autoProps": { 311 | "left": true, 312 | "height": "STRETCH" 313 | }, 314 | "vCenter": false, 315 | "hCenter": false 316 | }, 317 | "isPending": false 318 | } 319 | }, 320 | "order": ["1", "3"], 321 | "label": "Default" 322 | }, 323 | "layout_19": { 324 | "type": "FIXED", 325 | "content": { 326 | "1": { 327 | "type": "WIDGET", 328 | "setting": { 329 | "style": {}, 330 | "autoProps": { 331 | "left": false, 332 | "right": false, 333 | "width": "STRETCH", 334 | "top": false, 335 | "bottom": false, 336 | "height": "STRETCH" 337 | } 338 | }, 339 | "bbox": { 340 | "left": 0, 341 | "top": 0, 342 | "width": "356px", 343 | "height": "298px", 344 | "right": 0, 345 | "bottom": 0 346 | }, 347 | "widgetId": "widget_10", 348 | "isPending": true 349 | }, 350 | "2": { 351 | "type": "WIDGET", 352 | "bbox": { 353 | "left": "0", 354 | "top": "0", 355 | "right": "0", 356 | "bottom": "0" 357 | }, 358 | "widgetId": "widget_11", 359 | "setting": { 360 | "autoProps": { 361 | "width": "STRETCH", 362 | "height": "STRETCH" 363 | } 364 | } 365 | } 366 | }, 367 | "order": ["1", "2"], 368 | "label": "First" 369 | }, 370 | "layout_20": { 371 | "type": "FIXED", 372 | "content": {}, 373 | "order": [], 374 | "label": "Second" 375 | }, 376 | "layout_21": { 377 | "type": "FIXED", 378 | "content": { 379 | "0": { 380 | "type": "WIDGET", 381 | "bbox": { 382 | "left": "0px", 383 | "top": "0px", 384 | "width": "39.072%", 385 | "height": "60px", 386 | "right": "0px" 387 | }, 388 | "widgetId": "widget_16", 389 | "setting": { 390 | "autoProps": { 391 | "width": "STRETCH" 392 | } 393 | } 394 | }, 395 | "1": { 396 | "type": "WIDGET", 397 | "bbox": { 398 | "left": "0px", 399 | "top": "60px", 400 | "width": "78.1441%", 401 | "height": "52.1173%", 402 | "right": "0px", 403 | "bottom": "0px" 404 | }, 405 | "widgetId": "widget_17", 406 | "setting": { 407 | "autoProps": { 408 | "height": "STRETCH", 409 | "width": "STRETCH" 410 | } 411 | } 412 | } 413 | }, 414 | "order": ["0", "1"] 415 | }, 416 | "layout_22": { 417 | "type": "FIXED", 418 | "content": { 419 | "1": { 420 | "type": "WIDGET", 421 | "bbox": { 422 | "left": "82px", 423 | "top": "50%", 424 | "width": "291px", 425 | "height": "42px", 426 | "bottom": "0px" 427 | }, 428 | "widgetId": "widget_3", 429 | "setting": { 430 | "vCenter": true, 431 | "hCenter": false, 432 | "autoProps": { 433 | "top": false, 434 | "bottom": true 435 | } 436 | } 437 | }, 438 | "3": { 439 | "type": "WIDGET", 440 | "bbox": { 441 | "left": "370px", 442 | "top": 0, 443 | "width": "230px", 444 | "height": "60px", 445 | "right": 0, 446 | "bottom": 0 447 | }, 448 | "widgetId": "widget_5", 449 | "setting": { 450 | "autoProps": { 451 | "left": true, 452 | "height": "STRETCH" 453 | } 454 | } 455 | } 456 | }, 457 | "order": ["1", "3"], 458 | "label": "Default" 459 | }, 460 | "layout_23": { 461 | "type": "FIXED", 462 | "content": { 463 | "0": { 464 | "type": "WIDGET", 465 | "bbox": {}, 466 | "widgetId": "widget_14" 467 | }, 468 | "1": { 469 | "type": "WIDGET", 470 | "bbox": {}, 471 | "widgetId": "widget_15" 472 | } 473 | }, 474 | "order": ["0", "1"], 475 | "label": "Controller layout" 476 | }, 477 | "layout_24": { 478 | "content": { 479 | "0": { 480 | "type": "WIDGET", 481 | "widgetId": "widget_14", 482 | "bbox": { 483 | "left": 0, 484 | "top": 0, 485 | "bottom": 0, 486 | "right": 0 487 | } 488 | } 489 | }, 490 | "order": ["0"], 491 | "label": "Open widget layout" 492 | }, 493 | "layout_25": { 494 | "type": "FIXED", 495 | "content": {}, 496 | "order": [], 497 | "label": "First" 498 | }, 499 | "layout_29": { 500 | "type": "FIXED", 501 | "content": { 502 | "0": { 503 | "type": "WIDGET", 504 | "bbox": { 505 | "left": 0, 506 | "top": 0, 507 | "width": "356px", 508 | "height": "298px", 509 | "right": 0, 510 | "bottom": 0 511 | }, 512 | "widgetId": "widget_11", 513 | "setting": { 514 | "autoProps": { 515 | "left": false, 516 | "right": false, 517 | "width": "STRETCH", 518 | "top": false, 519 | "bottom": false, 520 | "height": "STRETCH" 521 | } 522 | } 523 | } 524 | }, 525 | "order": ["0"], 526 | "label": "Second" 527 | }, 528 | "layout_30": { 529 | "type": "FIXED", 530 | "label": "Map FixedLayout" 531 | } 532 | }, 533 | "widgets": { 534 | "widget_1": { 535 | "id": "widget_1", 536 | "uri": "widgets/layout/fixed/", 537 | "config": {}, 538 | "style": { 539 | "background": { 540 | "image": { 541 | "url": "" 542 | }, 543 | "color": "var(--primary-600)" 544 | }, 545 | "boxShadow": { 546 | "offsetX": { 547 | "distance": 0, 548 | "unit": "px" 549 | }, 550 | "offsetY": { 551 | "distance": 2, 552 | "unit": "px" 553 | }, 554 | "blur": { 555 | "distance": 4, 556 | "unit": "px" 557 | }, 558 | "spread": { 559 | "distance": 0, 560 | "unit": "px" 561 | }, 562 | "color": "rgba(0,0,0,0.5)" 563 | } 564 | }, 565 | "layouts": { 566 | "DEFAULT": { 567 | "LARGE": "layout_2" 568 | } 569 | }, 570 | "version": "1.10.0", 571 | "label": "Fixed Panel 1" 572 | }, 573 | "widget_3": { 574 | "id": "widget_3", 575 | "uri": "widgets/common/text/", 576 | "config": { 577 | "text": "

Demo App!

", 578 | "style": { 579 | "verticalAlign": "center", 580 | "wrap": true, 581 | "overflow": "scroll", 582 | "padding": "p-1" 583 | } 584 | }, 585 | "version": "1.10.0", 586 | "label": "Text 1" 587 | }, 588 | "widget_5": { 589 | "id": "widget_5", 590 | "uri": "widgets/common/controller/", 591 | "config": { 592 | "behavior": { 593 | "onlyOpenOne": true, 594 | "displayType": "STACK", 595 | "vertical": false, 596 | "size": {} 597 | }, 598 | "appearance": { 599 | "space": 0, 600 | "advanced": false, 601 | "card": { 602 | "showLabel": false, 603 | "labelGrowth": 10, 604 | "avatar": { 605 | "type": "primary", 606 | "size": "default", 607 | "shape": "rectangle" 608 | }, 609 | "showTooltip": true 610 | } 611 | } 612 | }, 613 | "layouts": { 614 | "controller": { 615 | "LARGE": "layout_3", 616 | "SMALL": "layout_4", 617 | "MEDIUM": "layout_23" 618 | }, 619 | "_openwidget": { 620 | "LARGE": "layout_5", 621 | "SMALL": "layout_6", 622 | "MEDIUM": "layout_24" 623 | } 624 | }, 625 | "widgets": ["widget_14", "widget_15"], 626 | "version": "1.10.0", 627 | "label": "Widget Controller 1" 628 | }, 629 | "widget_6": { 630 | "id": "widget_6", 631 | "uri": "widgets/layout/sidebar/", 632 | "config": { 633 | "direction": "HORIZONTAL", 634 | "collapseSide": "FIRST", 635 | "overlay": false, 636 | "size": "398px", 637 | "divider": { 638 | "visible": true 639 | }, 640 | "resizable": true, 641 | "toggleBtn": { 642 | "visible": true, 643 | "icon": "LEFT", 644 | "offsetX": 15, 645 | "offsetY": 0, 646 | "position": "CENTER", 647 | "iconSize": 14, 648 | "width": 15, 649 | "height": 40, 650 | "color": { 651 | "normal": { 652 | "icon": { 653 | "useTheme": true, 654 | "color": "var(--primary-700)" 655 | }, 656 | "bg": { 657 | "useTheme": true, 658 | "color": "var(--light-400)", 659 | "opacity": 0.6 660 | } 661 | }, 662 | "hover": { 663 | "bg": { 664 | "useTheme": true, 665 | "color": "var(--light-400)" 666 | } 667 | } 668 | }, 669 | "expandStyle": { 670 | "style": { 671 | "borderRadius": "0 4px 4px 0" 672 | } 673 | }, 674 | "collapseStyle": { 675 | "style": { 676 | "borderRadius": "0 4px 4px 0" 677 | } 678 | }, 679 | "template": "rect" 680 | }, 681 | "defaultState": 1 682 | }, 683 | "layouts": { 684 | "FIRST": { 685 | "LARGE": "layout_7" 686 | }, 687 | "SECOND": { 688 | "LARGE": "layout_14" 689 | } 690 | }, 691 | "version": "1.10.0", 692 | "label": "Sidebar 1" 693 | }, 694 | "widget_10": { 695 | "id": "widget_10", 696 | "uri": "widgets/common/text/", 697 | "config": { 698 | "text": "", 699 | "placeholder": "

Double click to edit text

", 700 | "style": { 701 | "verticalAlign": "start", 702 | "wrap": true, 703 | "overflow": "scroll", 704 | "padding": "p-1" 705 | } 706 | }, 707 | "version": "1.5.0", 708 | "label": "Text 4" 709 | }, 710 | "widget_11": { 711 | "id": "widget_11", 712 | "uri": "widgets/arcgis/arcgis-map/", 713 | "config": { 714 | "toolConifg": { 715 | "canZoom": true, 716 | "canHome": true, 717 | "canSearch": true 718 | }, 719 | "isUseCustomMapState": true, 720 | "initialMapState": { 721 | "viewPoint": { 722 | "rotation": 0, 723 | "scale": 18489297.737236, 724 | "targetGeometry": { 725 | "spatialReference": { 726 | "wkid": 102100 727 | }, 728 | "x": -10970311.977193125, 729 | "y": 4800743.33460336 730 | } 731 | }, 732 | "extent": { 733 | "spatialReference": { 734 | "wkid": 102100 735 | }, 736 | "xmin": -12795016.716416366, 737 | "ymin": 3269556.783995116, 738 | "xmax": -9145607.237969883, 739 | "ymax": 6331929.885211604 740 | }, 741 | "rotation": 0, 742 | "viewType": "2d" 743 | } 744 | }, 745 | "layouts": { 746 | "MapFixedLayout": { 747 | "LARGE": "layout_15", 748 | "SMALL": "layout_16", 749 | "MEDIUM": "layout_30" 750 | } 751 | }, 752 | "version": "1.10.0", 753 | "label": "Map 1" 754 | }, 755 | "widget_12": { 756 | "id": "widget_12", 757 | "uri": "widgets/layout/fixed/", 758 | "config": {}, 759 | "style": { 760 | "background": { 761 | "image": { 762 | "url": "" 763 | }, 764 | "color": "var(--primary)" 765 | }, 766 | "boxShadow": { 767 | "offsetX": { 768 | "distance": 0, 769 | "unit": "px" 770 | }, 771 | "offsetY": { 772 | "distance": 2, 773 | "unit": "px" 774 | }, 775 | "blur": { 776 | "distance": 4, 777 | "unit": "px" 778 | }, 779 | "spread": { 780 | "distance": 0, 781 | "unit": "px" 782 | }, 783 | "color": "rgba(0,0,0,0.5)" 784 | } 785 | }, 786 | "layouts": { 787 | "DEFAULT": { 788 | "SMALL": "layout_18" 789 | } 790 | }, 791 | "version": "1.5.0", 792 | "label": "Fixed Panel 2" 793 | }, 794 | "widget_13": { 795 | "id": "widget_13", 796 | "uri": "widgets/layout/sidebar/", 797 | "config": { 798 | "direction": "VERTICAL", 799 | "collapseSide": "SECOND", 800 | "overlay": false, 801 | "size": "140px", 802 | "divider": { 803 | "visible": true 804 | }, 805 | "resizable": true, 806 | "toggleBtn": { 807 | "visible": true, 808 | "icon": "DOWN", 809 | "offsetX": 0, 810 | "offsetY": -15, 811 | "position": "CENTER", 812 | "iconSize": 14, 813 | "width": 40, 814 | "height": 15, 815 | "color": { 816 | "normal": { 817 | "icon": { 818 | "useTheme": true, 819 | "color": "colors.primary" 820 | }, 821 | "bg": { 822 | "useTheme": true, 823 | "color": "var(--light-400)", 824 | "opacity": 0.6 825 | } 826 | }, 827 | "hover": { 828 | "bg": { 829 | "useTheme": true, 830 | "color": "var(--light-400)" 831 | } 832 | } 833 | }, 834 | "expandStyle": { 835 | "style": { 836 | "borderRadius": "4px 4px 0 0" 837 | } 838 | }, 839 | "collapseStyle": { 840 | "style": { 841 | "borderRadius": "4px 4px 0 0" 842 | } 843 | }, 844 | "template": "rect" 845 | }, 846 | "defaultState": 1 847 | }, 848 | "layouts": { 849 | "FIRST": { 850 | "SMALL": "layout_19" 851 | }, 852 | "SECOND": { 853 | "SMALL": "layout_20" 854 | } 855 | }, 856 | "version": "1.5.0", 857 | "label": "Sidebar 2" 858 | }, 859 | "widget_14": { 860 | "id": "widget_14", 861 | "uri": "widgets/arcgis/map-layers/", 862 | "config": { 863 | "useMapWidget": true 864 | }, 865 | "useMapWidgetIds": ["widget_11"], 866 | "version": "1.5.0", 867 | "label": "Map Layers 1" 868 | }, 869 | "widget_15": { 870 | "id": "widget_15", 871 | "uri": "widgets/arcgis/legend/", 872 | "config": {}, 873 | "useMapWidgetIds": ["widget_11"], 874 | "version": "1.5.0", 875 | "label": "Legend 1" 876 | }, 877 | "widget_16": { 878 | "id": "widget_16", 879 | "uri": "widgets/layout/fixed/", 880 | "config": {}, 881 | "style": { 882 | "background": { 883 | "image": { 884 | "url": "" 885 | }, 886 | "color": "var(--primary)" 887 | }, 888 | "boxShadow": { 889 | "offsetX": { 890 | "distance": 0, 891 | "unit": "px" 892 | }, 893 | "offsetY": { 894 | "distance": 2, 895 | "unit": "px" 896 | }, 897 | "blur": { 898 | "distance": 4, 899 | "unit": "px" 900 | }, 901 | "spread": { 902 | "distance": 0, 903 | "unit": "px" 904 | }, 905 | "color": "rgba(0,0,0,0.5)" 906 | } 907 | }, 908 | "layouts": { 909 | "DEFAULT": { 910 | "MEDIUM": "layout_22" 911 | } 912 | }, 913 | "version": "1.5.0", 914 | "label": "Fixed Panel 3" 915 | }, 916 | "widget_17": { 917 | "id": "widget_17", 918 | "uri": "widgets/layout/sidebar/", 919 | "config": { 920 | "direction": "HORIZONTAL", 921 | "collapseSide": "FIRST", 922 | "overlay": false, 923 | "size": "398px", 924 | "divider": { 925 | "visible": true 926 | }, 927 | "resizable": true, 928 | "toggleBtn": { 929 | "visible": true, 930 | "icon": "LEFT", 931 | "offsetX": 15, 932 | "offsetY": 0, 933 | "position": "CENTER", 934 | "iconSize": 14, 935 | "width": 15, 936 | "height": 40, 937 | "color": { 938 | "normal": { 939 | "icon": { 940 | "useTheme": true, 941 | "color": "var(--primary-700)" 942 | }, 943 | "bg": { 944 | "useTheme": true, 945 | "color": "var(--light-400)", 946 | "opacity": 0.6 947 | } 948 | }, 949 | "hover": { 950 | "bg": { 951 | "useTheme": true, 952 | "color": "var(--light-400)" 953 | } 954 | } 955 | }, 956 | "expandStyle": { 957 | "style": { 958 | "borderRadius": "0 4px 4px 0" 959 | } 960 | }, 961 | "collapseStyle": { 962 | "style": { 963 | "borderRadius": "0 4px 4px 0" 964 | } 965 | }, 966 | "template": "rect" 967 | }, 968 | "defaultState": 1 969 | }, 970 | "layouts": { 971 | "FIRST": { 972 | "MEDIUM": "layout_25" 973 | }, 974 | "SECOND": { 975 | "MEDIUM": "layout_29" 976 | } 977 | }, 978 | "version": "1.5.0", 979 | "label": "Sidebar 3" 980 | }, 981 | "widget_18": { 982 | "uri": "widgets/add-layers/", 983 | "version": "1.10.0", 984 | "label": "add-layers 1", 985 | "config": { 986 | "zoomToLayer": true 987 | }, 988 | "id": "widget_18", 989 | "useMapWidgetIds": ["widget_11"] 990 | } 991 | }, 992 | "exbVersion": "1.10.0", 993 | "mainSizeMode": "LARGE", 994 | "theme": "themes/default/", 995 | "forBuilderAttributes": { 996 | "lockLayout": false 997 | }, 998 | "template": "jewelrybox", 999 | "widgetsManifest": {}, 1000 | "views": {}, 1001 | "sections": {}, 1002 | "dataSources": {}, 1003 | "messageConfigs": {}, 1004 | "pageStructure": [ 1005 | { 1006 | "home": [] 1007 | } 1008 | ], 1009 | "timestamp": 1643069624185, 1010 | "attributes": { 1011 | "portalUrl": "https://prof-services.maps.arcgis.com" 1012 | }, 1013 | "customTheme": {}, 1014 | "dialogs": {}, 1015 | "sharedThemeVariables": { 1016 | "header": {}, 1017 | "body": {}, 1018 | "button": {}, 1019 | "logo": { 1020 | "small": null, 1021 | "link": null 1022 | } 1023 | } 1024 | } 1025 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "experience-builder-devops-example", 3 | "type": "exb-web-extension-repo", 4 | "description": "Example of using custom widgets and automatically building an Experience Builder app.", 5 | "copyright": "Gavin Rehkemper", 6 | "license": "http://www.apache.org/licenses/LICENSE-2.0" 7 | } 8 | -------------------------------------------------------------------------------- /themes/demo-theme/README.md: -------------------------------------------------------------------------------- 1 | # Sample theme 2 | 3 | This sample contains the minimal required files to create a custom theme. 4 | 5 | ## How to use the sample 6 | 7 | Clone the [sample repo](https://github.com/esri/arcgis-experience-builder-sdk-resources) and copy this theme's folder (within `themes`) to the `client/your-extensions/themes` folder of your Experience Builder installation. 8 | 9 | ## How it works 10 | 11 | When a custom theme is selected, the theme manager from the Jimu framework will read the custom variables in the `variables.json` and merge them with the default ones to create a new variables object at runtime. The variables object is then applied to the style modules (including the custom ones from `style.ts`) to dynamically generate CSS style sheets. 12 | 13 | ### Override theme variables 14 | 15 | The `variables.json` file in the sample theme folder contains all variables from the default theme, which can be overridden with different values. 16 | 17 | A simple example: 18 | 19 | ```json 20 | { 21 | "colors": { 22 | "primary": "red" 23 | }, 24 | "typography": { 25 | "fontFamilyBase": "Impact, Arial", 26 | "fontSizeBase": "1rem" 27 | } 28 | } 29 | ``` 30 | 31 | > NOTE: In order to have your theme customization to be reflected correct, please remove any unchanged variables from the demo `variables.json` file to avoid unneeded theme overrides. 32 | 33 | ### Style Modules 34 | 35 | Any custom CSS styles can be added inside of the `style.ts` file. 36 | 37 | Global styles can be added to the `globalStyles` function and exported as a module with the name of "Global". 38 | 39 | Styles for UI components can be added the same way: wrap the CSS in a function and export it as a module with the same name as the component. For example, the `buttonStyles` function is exported as "Button" in the sample `style.ts` file. 40 | 41 | Uncomment the code inside of `style.ts` to see examples. 42 | 43 | ### Localization 44 | 45 | Themes support localization files to provide translation texts for different locales to use, such as `_themeLabel` used by the theme setting panel in the builder to display the name of the theme. 46 | 47 | Register supported locales in the `manifest.json` as: 48 | 49 | ``` json 50 | "translatedLocales": [ 51 | "en", 52 | "ar", 53 | "zh-cn" 54 | ] 55 | ``` 56 | 57 | Each locale needs to have a supporting translation file added under the `/translations` directory named as `{locale}.js`, except for "en", which has its file named `default.ts`. 58 | 59 | For example, the "ar" locale should have an `ar.js` file in the `/translations` folder. 60 | 61 | Then add and edit the text in each locale file, such as the `_themeLabel` string mentioned above. 62 | -------------------------------------------------------------------------------- /themes/demo-theme/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-theme", 3 | "label": "Demo Theme", 4 | "type": "theme", 5 | "thumbnails ": [], 6 | "font": { 7 | "fontFamily": "Avenir Next", 8 | "color": "#484848" 9 | }, 10 | "version": "1.13.0", 11 | "exbVersion": "1.13.0", 12 | "author": "Esri R&D Center Beijing", 13 | "description": "This is a demo theme containing all customizable theme variables.", 14 | "copyright": "", 15 | "license": "http://www.apache.org/licenses/LICENSE-2.0", 16 | "translatedLocales": [ 17 | "en", 18 | "zh-cn" 19 | ] 20 | } -------------------------------------------------------------------------------- /themes/demo-theme/style.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Licensing 3 | 4 | Copyright 2020 Esri 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); You 7 | may not use this file except in compliance with the License. You may 8 | obtain a copy of the License at 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 14 | implied. See the License for the specific language governing 15 | permissions and limitations under the License. 16 | 17 | A copy of the license is available in the repository's 18 | LICENSE file. 19 | */ 20 | 21 | /* 22 | * Sample code: 23 | * Uncomment the following sections to add: 24 | * 1. global style: import the Roboto font from external url. 25 | * 2. Button component style override: font size change for all Button components. 26 | */ 27 | 28 | // import { css, IMThemeVariables } from 'jimu-core'; 29 | 30 | // const globalStyles = () => { 31 | // return css` 32 | // /* Change the "fontFamilyBase" property in variables.json to "Roboto" 33 | // * to use this font. 34 | // */ 35 | // @import url("https://fonts.googleapis.com/css?family=Roboto"); 36 | // ` 37 | // }; 38 | 39 | // const buttonStyles = (props) => { 40 | // const theme: IMThemeVariables = props.theme; 41 | // return css` 42 | // font-size: ${theme?.typography.sizes.display3}; 43 | // ` 44 | // }; 45 | 46 | // // global styles 47 | // export { globalStyles as Global}; 48 | // // Button component styles 49 | // export { buttonStyles as Button}; -------------------------------------------------------------------------------- /themes/demo-theme/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinr-maps/experience-builder-devops-example/a1e2ebf0f94782bae87c5266e5464951adfea1ed/themes/demo-theme/thumbnail.png -------------------------------------------------------------------------------- /themes/demo-theme/translations/default.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | _themeLabel: 'Demo', 3 | } -------------------------------------------------------------------------------- /themes/demo-theme/translations/zh-cn.js: -------------------------------------------------------------------------------- 1 | System.register([], function (_export) {return {execute: function () {_export({ 2 | _themeLabel: '演示', 3 | })}}}); -------------------------------------------------------------------------------- /themes/demo-theme/variables.json: -------------------------------------------------------------------------------- 1 | { 2 | "darkTheme": false, 3 | "coloration": "default", 4 | "colors": { 5 | "white": "#fff", 6 | "black": "#000", 7 | "transparent": "transparent", 8 | "primary": "#076fe5", 9 | "secondary": "#c5c5c5", 10 | "light": "#f0f0f0", 11 | "dark": "#050505", 12 | "info": "#089bdc", 13 | "success": "#09cf74", 14 | "warning": "#ffea1d", 15 | "danger": "#e1001b", 16 | "palette": { 17 | "primary": { 18 | "100": "#e6f2ff", 19 | "200": "#acd3ff", 20 | "300": "#65adff", 21 | "400": "#2c8fff", 22 | "500": "#076fe5", 23 | "600": "#005eca", 24 | "700": "#004ca3", 25 | "800": "#003c82", 26 | "900": "#002958" 27 | }, 28 | "secondary": { 29 | "100": "#f0f0f0", 30 | "200": "#e3e3e3", 31 | "300": "#d5d5d5", 32 | "400": "#c5c5c5", 33 | "500": "#b6b6b6", 34 | "600": "#a8a8a8", 35 | "700": "#989898", 36 | "800": "#8b8b8b", 37 | "900": "#828282" 38 | }, 39 | "light": { 40 | "100": "#f0f0f0", 41 | "200": "#e3e3e3", 42 | "300": "#d5d5d5", 43 | "400": "#c5c5c5", 44 | "500": "#b6b6b6", 45 | "600": "#a8a8a8", 46 | "700": "#989898", 47 | "800": "#8b8b8b", 48 | "900": "#828282" 49 | }, 50 | "dark": { 51 | "100": "#767676", 52 | "200": "#6a6a6a", 53 | "300": "#5e5e5e", 54 | "400": "#525252", 55 | "500": "#444444", 56 | "600": "#363636", 57 | "700": "#282828", 58 | "800": "#181818", 59 | "900": "#050505" 60 | }, 61 | "info": { 62 | "100": "#e5f7ff", 63 | "200": "#9fe2ff", 64 | "300": "#60ceff", 65 | "400": "#21bbff", 66 | "500": "#089bdc", 67 | "600": "#0077ac", 68 | "700": "#005a82", 69 | "800": "#003b56", 70 | "900": "#002231" 71 | }, 72 | "success": { 73 | "100": "#ebfff6", 74 | "200": "#acffd9", 75 | "300": "#56f8ad", 76 | "400": "#16ed8a", 77 | "500": "#09cf74", 78 | "600": "#03b161", 79 | "700": "#00904e", 80 | "800": "#006838", 81 | "900": "#004022" 82 | }, 83 | "warning": { 84 | "100": "#fffdeb", 85 | "200": "#fff9c3", 86 | "300": "#fff592", 87 | "400": "#fff05f", 88 | "500": "#ffea1d", 89 | "600": "#eed800", 90 | "700": "#d4c000", 91 | "800": "#b5a400", 92 | "900": "#938500" 93 | }, 94 | "danger": { 95 | "100": "#ffe9ec", 96 | "200": "#ff94a1", 97 | "300": "#ff5066", 98 | "400": "#ff203c", 99 | "500": "#e1001b", 100 | "600": "#bf0017", 101 | "700": "#9f0013", 102 | "800": "#79000f", 103 | "900": "#4a0009" 104 | } 105 | } 106 | }, 107 | "typography": { 108 | "fontFamilyBase": "Avenir Next", 109 | "fontSizeRoot": "100%", 110 | "fontSizeBase": "0.875rem", 111 | "sizes": { 112 | "default": "0.875rem", 113 | "sm": "0.8125rem", 114 | "lg": "1rem", 115 | "display1": "1.875rem", 116 | "display2": "1.5rem", 117 | "display3": "1.25rem", 118 | "display4": "1.125rem", 119 | "display5": "1rem", 120 | "display6": "0.875rem" 121 | }, 122 | "weights": { 123 | "extraLight": "200", 124 | "light": "300", 125 | "medium": "400", 126 | "bold": "500", 127 | "extraBold": "600" 128 | }, 129 | "lineHeights": { 130 | "medium": 1.5, 131 | "sm": 1, 132 | "lg": 1.5 133 | }, 134 | "headings": { 135 | "h1FontSize": "1.875rem", 136 | "h2FontSize": "1.5rem", 137 | "h3FontSize": "1.25rem", 138 | "h4FontSize": "1.125rem", 139 | "h5FontSize": "1rem", 140 | "h6FontSize": "0.875rem", 141 | "fontFamily": "inherit", 142 | "fontWeight": "300", 143 | "fontStyle": "unset", 144 | "lineHeight": 1.2, 145 | "color": "inherit", 146 | "marginBottom": "0.5rem" 147 | }, 148 | "paragraph": { 149 | "marginBottom": "1rem" 150 | }, 151 | "label": { 152 | "marginBottom": "0.5rem" 153 | }, 154 | "hr": { 155 | "marginY": "1rem", 156 | "borderColor": "rgba(0, 0, 0, 0.1)", 157 | "borderWidth": "1px" 158 | }, 159 | "small": { 160 | "fontSize": "80%" 161 | }, 162 | "mark": { 163 | "padding": "0.2em", 164 | "bg": "#fcf8e3" 165 | } 166 | }, 167 | "spacer": "1rem", 168 | "sizes": { 169 | "0": 0, 170 | "1": "0.25rem", 171 | "2": "0.5rem", 172 | "3": "1rem", 173 | "4": "1.25rem", 174 | "5": "1.5rem" 175 | }, 176 | "gutters": { 177 | "0": 0, 178 | "1": "0.0625rem", 179 | "2": "0.125rem", 180 | "3": "0.25rem", 181 | "4": "0.5rem", 182 | "5": "0.625rem" 183 | }, 184 | "border": { 185 | "color": "#d5d5d5", 186 | "width": "1px" 187 | }, 188 | "borderRadiuses": { 189 | "none": "0", 190 | "sm": "0", 191 | "default": "0.125rem", 192 | "lg": "0.25rem", 193 | "circle": "50%", 194 | "pill": "50rem" 195 | }, 196 | "boxShadows": { 197 | "none": "none", 198 | "sm": "0 0 6px 0 rgba(0,0,0,0.15)", 199 | "default": "0 0 10px 1px rgba(0,0,0,0.2)", 200 | "lg": "0 0 20px 2px rgba(0,0,0,0.2)" 201 | }, 202 | "surfaces": { 203 | "1": { 204 | "bg": "#fff", 205 | "border": { 206 | "width": "1px", 207 | "color": "#c5c5c5" 208 | }, 209 | "shadow": "none" 210 | }, 211 | "2": { 212 | "bg": "#fff", 213 | "border": { 214 | "width": "1px", 215 | "color": "#d5d5d5" 216 | }, 217 | "shadow": "0 0 10px 1px rgba(0,0,0,0.2)" 218 | }, 219 | "3": { 220 | "bg": "#f0f0f0", 221 | "border": { 222 | "width": "1px", 223 | "color": "#c5c5c5" 224 | }, 225 | "shadow": "0 0 6px 0 rgba(0,0,0,0.15)" 226 | } 227 | }, 228 | "body": { 229 | "bg": "#f0f0f0", 230 | "color": "#050505", 231 | "fontFamily": "Avenir Next", 232 | "fontWeight": "400", 233 | "fontSize": "0.875rem", 234 | "fontStyle": "unset", 235 | "lineHeight": 1.5 236 | }, 237 | "header": { 238 | "bg": "#004ca3", 239 | "color": "#f0f0f0" 240 | }, 241 | "footer": { 242 | "bg": "#f0f0f0", 243 | "color": "#050505" 244 | }, 245 | "link": { 246 | "color": "#076fe5", 247 | "decoration": "none", 248 | "hover": { 249 | "color": "#005eca", 250 | "decoration": "underline" 251 | } 252 | }, 253 | "components": { 254 | "alert": { 255 | "paddingY": "0.5rem", 256 | "paddingX": "1rem", 257 | "marginBottom": "0.625rem", 258 | "borderRadius": "0.25rem", 259 | "linkFontWeight": "300", 260 | "borderWidth": "1px", 261 | "bgLevel": "-10", 262 | "borderLevel": "-9", 263 | "colorLevel": "6" 264 | }, 265 | "badge": { 266 | "fontSize": "85%", 267 | "fontWeight": "400", 268 | "paddingX": "0.5rem", 269 | "paddingY": "0.25rem", 270 | "borderRadius": "50rem", 271 | "minSize": "6px", 272 | "border": { 273 | "width": "1px", 274 | "color": "#fff" 275 | } 276 | }, 277 | "breadcrumb": { 278 | "bg": "#e3e3e3", 279 | "activeColor": "#6a6a6a", 280 | "paddingY": "0.75rem", 281 | "paddingX": "1rem", 282 | "marginBottom": "1rem", 283 | "borderRadius": "0.125rem", 284 | "item": { 285 | "color": "#050505", 286 | "hoverColor": "#076fe5", 287 | "padding": "0.5rem" 288 | }, 289 | "divider": { 290 | "content": "\"/\"", 291 | "color": "#6a6a6a" 292 | } 293 | }, 294 | "button": { 295 | "sizes": { 296 | "default": { 297 | "fontSize": "0.875rem", 298 | "lineHeight": "1.375rem", 299 | "paddingX": "1rem", 300 | "paddingY": "0.25rem", 301 | "borderRadius": "2px" 302 | }, 303 | "sm": { 304 | "fontSize": "0.8125rem", 305 | "lineHeight": "1rem", 306 | "paddingX": "1rem", 307 | "paddingY": "0.25rem", 308 | "borderRadius": "2px" 309 | }, 310 | "lg": { 311 | "fontSize": "1rem", 312 | "lineHeight": "1.375rem", 313 | "paddingX": "1rem", 314 | "paddingY": "0.5rem", 315 | "borderRadius": "2px" 316 | } 317 | }, 318 | "variants": { 319 | "default": { 320 | "default": { 321 | "color": "#181818", 322 | "bg": "#fff", 323 | "border": { 324 | "color": "#c5c5c5", 325 | "width": "1px" 326 | } 327 | }, 328 | "hover": { 329 | "bg": "#f0f0f0" 330 | }, 331 | "active": { 332 | "color": "#fff", 333 | "bg": "#076fe5", 334 | "border": { 335 | "color": "#076fe5" 336 | } 337 | }, 338 | "disabled": { 339 | "color": "#8b8b8b", 340 | "bg": "#e3e3e3", 341 | "border": { 342 | "color": "#c5c5c5" 343 | } 344 | } 345 | }, 346 | "primary": { 347 | "default": { 348 | "color": "#fff", 349 | "bg": "#076fe5", 350 | "border": { 351 | "color": "#076fe5", 352 | "width": "1px" 353 | } 354 | }, 355 | "hover": { 356 | "bg": "#005eca" 357 | }, 358 | "active": { 359 | "bg": "#005eca" 360 | }, 361 | "disabled": { 362 | "color": "#8b8b8b", 363 | "bg": "#e3e3e3", 364 | "border": { 365 | "color": "#e3e3e3" 366 | } 367 | } 368 | }, 369 | "secondary": { 370 | "default": { 371 | "color": "#076fe5", 372 | "bg": "transparent", 373 | "border": { 374 | "width": "1px", 375 | "color": "#076fe5" 376 | } 377 | }, 378 | "hover": { 379 | "color": "#fff", 380 | "bg": "#076fe5", 381 | "border": { 382 | "color": "#076fe5" 383 | } 384 | }, 385 | "active": { 386 | "color": "#fff", 387 | "bg": "#076fe5", 388 | "border": { 389 | "color": "#076fe5" 390 | } 391 | }, 392 | "disabled": { 393 | "color": "#8b8b8b", 394 | "bg": "#e3e3e3", 395 | "border": { 396 | "color": "#c5c5c5" 397 | } 398 | } 399 | }, 400 | "tertiary": { 401 | "default": { 402 | "color": "#181818", 403 | "bg": "transparent", 404 | "border": { 405 | "width": "1px", 406 | "color": "transparent" 407 | } 408 | }, 409 | "hover": { 410 | "color": "#076fe5" 411 | }, 412 | "active": { 413 | "color": "#fff", 414 | "bg": "#076fe5" 415 | }, 416 | "disabled": { 417 | "color": "#8b8b8b" 418 | } 419 | }, 420 | "danger": { 421 | "default": { 422 | "color": "#fff", 423 | "bg": "#e1001b", 424 | "border": { 425 | "width": "1px", 426 | "color": "#e1001b" 427 | } 428 | }, 429 | "hover": { 430 | "bg": "#bf0017" 431 | }, 432 | "active": { 433 | "bg": "#bf0017" 434 | }, 435 | "disabled": { 436 | "color": "#8b8b8b", 437 | "bg": "#e3e3e3", 438 | "border": { 439 | "color": "#e3e3e3" 440 | } 441 | } 442 | }, 443 | "link": { 444 | "default": { 445 | "color": "#076fe5", 446 | "bg": "transparent", 447 | "border": { 448 | "width": "1px", 449 | "color": "transparent" 450 | }, 451 | "decoration": "underline" 452 | }, 453 | "hover": { 454 | "color": "#005eca", 455 | "decoration": "underline" 456 | }, 457 | "active": { 458 | "color": "#005eca" 459 | }, 460 | "disabled": { 461 | "color": "#8b8b8b" 462 | } 463 | } 464 | }, 465 | "icon": { 466 | "spacing": "0.5rem", 467 | "size": "auto" 468 | } 469 | }, 470 | "card": { 471 | "root": { 472 | "default": { 473 | "bg": "#fff", 474 | "border": { 475 | "width": "1px", 476 | "color": "#c5c5c5" 477 | }, 478 | "shadow": "none", 479 | "borderRadius": "0" 480 | }, 481 | "hover": { 482 | "border": { 483 | "width": "1px", 484 | "color": "#076fe5" 485 | }, 486 | "shadow": "0 0 0 1px #076fe5" 487 | }, 488 | "active": { 489 | "border": { 490 | "width": "1px", 491 | "color": "#076fe5" 492 | }, 493 | "shadow": "0 0 0 1px #076fe5" 494 | } 495 | }, 496 | "spacer": { 497 | "y": "0.625rem", 498 | "x": "1.25rem" 499 | }, 500 | "headerBg": "#fff", 501 | "divider": { 502 | "color": "#e3e3e3", 503 | "width": "1px" 504 | }, 505 | "checkMark": { 506 | "color": "#fff", 507 | "bg": "#076fe5" 508 | } 509 | }, 510 | "close": { 511 | "fontSize": "1.3125rem", 512 | "fontWeight": "500", 513 | "color": "#000", 514 | "textShadow": "0 1px 0 #fff" 515 | }, 516 | "dropdown": { 517 | "button": { 518 | "sizes": { 519 | "default": { 520 | "paddingX": "0.375rem" 521 | } 522 | } 523 | }, 524 | "minWidth": "10rem", 525 | "paddingY": "0.25rem", 526 | "spacer": "4px", 527 | "bg": "#fff", 528 | "border": { 529 | "width": "1px", 530 | "color": "#d5d5d5" 531 | }, 532 | "shadow": "0 0 10px 1px rgba(0,0,0,0.2)", 533 | "borderRadius": "0.125rem", 534 | "divider": { 535 | "bg": "#c5c5c5", 536 | "margin": "0.25rem 0.5rem" 537 | }, 538 | "link": { 539 | "color": "#050505", 540 | "hoverColor": "#fff", 541 | "hoverBg": "#076fe5", 542 | "activeColor": "#fff", 543 | "activeBg": "#076fe5", 544 | "checkIconColor": "inherit", 545 | "checkIconGutter": "0.5rem", 546 | "disabledColor": "#6a6a6a" 547 | }, 548 | "item": { 549 | "paddingY": "0.25rem", 550 | "paddingX": "1rem" 551 | }, 552 | "header": { 553 | "color": "#6a6a6a" 554 | } 555 | }, 556 | "form": { 557 | "group": { 558 | "marginBottom": "1rem" 559 | }, 560 | "helpText": { 561 | "marginTop": "0.25rem", 562 | "fontSize": "0.8125rem" 563 | }, 564 | "check": { 565 | "inline": { 566 | "marginX": "0.75rem", 567 | "inputMarginX": "0.3125rem" 568 | } 569 | } 570 | }, 571 | "input": { 572 | "bg": "#fff", 573 | "color": "#000", 574 | "border": { 575 | "color": "#c5c5c5", 576 | "width": "1px" 577 | }, 578 | "boxShadow": null, 579 | "disabled": { 580 | "bg": "#f0f0f0", 581 | "borderColor": "#c5c5c5" 582 | }, 583 | "focus": { 584 | "borderColor": "#076fe5", 585 | "boxShadow": null 586 | }, 587 | "placeHolderColor": "#6a6a6a", 588 | "sizes": { 589 | "default": { 590 | "fontSize": "0.875rem", 591 | "lineHeight": 1.5, 592 | "paddingX": "0.5rem", 593 | "paddingY": "0.25rem", 594 | "borderRadius": "0.125rem", 595 | "height": "32px" 596 | }, 597 | "sm": { 598 | "fontSize": "0.8125rem", 599 | "lineHeight": 1, 600 | "paddingX": "0.5rem", 601 | "paddingY": "0.25rem", 602 | "borderRadius": "0.125rem", 603 | "height": "26px" 604 | }, 605 | "lg": { 606 | "fontSize": "1rem", 607 | "lineHeight": 1.5, 608 | "paddingX": "0.5rem", 609 | "paddingY": "0.5rem", 610 | "borderRadius": "0.125rem", 611 | "height": "40px" 612 | } 613 | }, 614 | "transition": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", 615 | "checkbox": { 616 | "size": "16px", 617 | "border": { 618 | "color": "#a8a8a8", 619 | "width": "2px" 620 | }, 621 | "hover": { 622 | "borderColor": "#076fe5" 623 | }, 624 | "bg": "#fff", 625 | "checked": { 626 | "color": "#fff", 627 | "bg": "#076fe5" 628 | }, 629 | "iconSize": "12px", 630 | "borderRadius": "2px" 631 | }, 632 | "radio": { 633 | "size": "16px", 634 | "border": { 635 | "color": "#a8a8a8", 636 | "width": "2px" 637 | }, 638 | "hover": { 639 | "borderColor": "#076fe5" 640 | }, 641 | "bg": "#fff", 642 | "checked": { 643 | "color": "#076fe5", 644 | "bg": "#fff" 645 | }, 646 | "iconSize": "8px", 647 | "borderRadius": "50rem" 648 | }, 649 | "switch": { 650 | "width": "28px", 651 | "height": "16px", 652 | "bg": "#fff", 653 | "border": { 654 | "width": "1px", 655 | "color": "#a8a8a8" 656 | }, 657 | "checkedBg": "#076fe5", 658 | "checkedBorder": { 659 | "color": "#076fe5" 660 | }, 661 | "slider": { 662 | "gap": "2px", 663 | "height": "auto", 664 | "width": "auto", 665 | "color": "#181818", 666 | "checkedColor": "white", 667 | "disabledColor": "#8b8b8b" 668 | }, 669 | "borderRadius": "50rem", 670 | "focusColor": "#000" 671 | } 672 | }, 673 | "select": { 674 | "button": { 675 | "sizes": { 676 | "default": { 677 | "paddingX": "0.375rem" 678 | }, 679 | "sm": { 680 | "paddingX": "0.375rem" 681 | }, 682 | "lg": { 683 | "paddingX": "0.375rem" 684 | } 685 | } 686 | } 687 | }, 688 | "listGroup": { 689 | "fontSize": "1rem", 690 | "bg": "#fff", 691 | "border": { 692 | "color": "#d5d5d5", 693 | "width": "1px" 694 | }, 695 | "borderRadius": "0.125rem", 696 | "item": { 697 | "paddingY": "0.75rem", 698 | "paddingX": "1rem" 699 | }, 700 | "hover": { 701 | "bg": "#f0f0f0" 702 | }, 703 | "active": { 704 | "color": "inherit", 705 | "bg": "rgba(7,111,229,0.1)", 706 | "borderColor": "#d5d5d5" 707 | }, 708 | "disabled": { 709 | "color": "#989898", 710 | "bg": "#e3e3e3" 711 | }, 712 | "action": { 713 | "color": "#363636", 714 | "hover": { 715 | "color": "#363636" 716 | }, 717 | "active": { 718 | "color": "#050505", 719 | "bg": "#e3e3e3" 720 | } 721 | } 722 | }, 723 | "inputGroup": { 724 | "addon": { 725 | "color": "#000", 726 | "bg": "#e3e3e3", 727 | "borderColor": "#c5c5c5" 728 | } 729 | }, 730 | "modal": { 731 | "innerPadding": "1rem", 732 | "transition": "transform .3s ease-out", 733 | "dialog": { 734 | "margin": ".5rem", 735 | "marginYSmUp": "1.75rem" 736 | }, 737 | "title": { 738 | "lineHeight": 1.5 739 | }, 740 | "content": { 741 | "bg": "#fff", 742 | "border": { 743 | "width": "1px", 744 | "color": "#d5d5d5" 745 | }, 746 | "shadow": "0 0 10px 1px rgba(0,0,0,0.2)", 747 | "borderRadius": "0.25rem" 748 | }, 749 | "backdrop": { 750 | "bg": "#000", 751 | "opacity": 0.6 752 | }, 753 | "header": { 754 | "border": { 755 | "color": "#d5d5d5", 756 | "width": "1px" 757 | }, 758 | "paddingY": ".75rem", 759 | "paddingX": "1rem" 760 | }, 761 | "footer": { 762 | "border": { 763 | "color": "#d5d5d5", 764 | "width": "0" 765 | }, 766 | "button": { 767 | "minWidth": "6.25rem" 768 | } 769 | }, 770 | "sizes": { 771 | "lg": "800px", 772 | "md": "500px", 773 | "sm": "300px" 774 | } 775 | }, 776 | "nav": { 777 | "variants": { 778 | "default": { 779 | "size": { 780 | "fontSize": "0.875rem", 781 | "lineHeight": 1.5, 782 | "paddingX": "1rem", 783 | "paddingY": "0.25rem" 784 | }, 785 | "gutter": "0.25rem", 786 | "icon": { 787 | "spacing": "0.5rem" 788 | }, 789 | "root": { 790 | "borderRadius": "0.125rem" 791 | }, 792 | "item": { 793 | "default": { 794 | "color": "#181818", 795 | "bg": "${colors.transparent}", 796 | "border": { 797 | "width": 0 798 | }, 799 | "borderRadius": "0.125rem" 800 | }, 801 | "hover": { 802 | "color": "#076fe5", 803 | "borderRadius": "0.125rem" 804 | }, 805 | "active": { 806 | "color": "#076fe5", 807 | "borderRadius": "0.125rem" 808 | }, 809 | "disabled": { 810 | "color": "#989898", 811 | "shadow": "none", 812 | "borderRadius": "0.125rem" 813 | } 814 | } 815 | }, 816 | "underline": { 817 | "size": { 818 | "fontSize": "0.875rem", 819 | "lineHeight": 1.5, 820 | "paddingX": "1rem", 821 | "paddingY": "0.25rem" 822 | }, 823 | "gutter": "0.25rem", 824 | "icon": { 825 | "spacing": "0.5rem" 826 | }, 827 | "root": { 828 | "border": { 829 | "width": 0 830 | }, 831 | "borderRadius": "0.125rem" 832 | }, 833 | "item": { 834 | "default": { 835 | "color": "#181818", 836 | "bg": "${colors.transparent}", 837 | "border": { 838 | "color": "transparent", 839 | "width": "2px" 840 | }, 841 | "borderRadius": "0.125rem" 842 | }, 843 | "hover": { 844 | "color": "#076fe5", 845 | "border": { 846 | "color": "transparent", 847 | "width": "2px" 848 | }, 849 | "borderRadius": "0.125rem" 850 | }, 851 | "active": { 852 | "color": "#076fe5", 853 | "border": { 854 | "color": "#076fe5", 855 | "width": "2px" 856 | }, 857 | "borderRadius": "0.125rem" 858 | }, 859 | "disabled": { 860 | "color": "#989898", 861 | "shadow": "none", 862 | "borderRadius": "0.125rem" 863 | } 864 | } 865 | }, 866 | "pills": { 867 | "size": { 868 | "fontSize": "0.875rem", 869 | "lineHeight": 1.5, 870 | "paddingX": "1rem", 871 | "paddingY": "0.25rem" 872 | }, 873 | "gutter": "0.25rem", 874 | "icon": { 875 | "spacing": "0.5rem" 876 | }, 877 | "root": { 878 | "borderRadius": "50rem" 879 | }, 880 | "item": { 881 | "default": { 882 | "color": "#181818", 883 | "border": { 884 | "width": "0px" 885 | }, 886 | "borderRadius": "50rem" 887 | }, 888 | "hover": { 889 | "color": "#076fe5", 890 | "borderRadius": "50rem" 891 | }, 892 | "active": { 893 | "color": "#fff", 894 | "bg": "#076fe5", 895 | "borderRadius": "50rem" 896 | }, 897 | "disabled": { 898 | "color": "#989898", 899 | "shadow": "none", 900 | "borderRadius": "50rem" 901 | } 902 | } 903 | }, 904 | "tabs": { 905 | "size": { 906 | "fontSize": "0.875rem", 907 | "lineHeight": 1.5, 908 | "paddingX": "1rem", 909 | "paddingY": "0.25rem" 910 | }, 911 | "gutter": "0.25rem", 912 | "icon": { 913 | "spacing": "0.5rem" 914 | }, 915 | "root": { 916 | "border": { 917 | "width": "1px", 918 | "color": "#b6b6b6" 919 | }, 920 | "borderRadius": "0.125rem" 921 | }, 922 | "item": { 923 | "default": { 924 | "color": "#181818", 925 | "bg": "#f0f0f0", 926 | "border": { 927 | "width": "1px", 928 | "color": "#b6b6b6" 929 | }, 930 | "borderRadius": "0.125rem" 931 | }, 932 | "hover": { 933 | "bg": "#fff" 934 | }, 935 | "active": { 936 | "color": "#076fe5", 937 | "bg": "#fff", 938 | "border": { 939 | "width": "1px", 940 | "color": "#b6b6b6" 941 | } 942 | }, 943 | "disabled": { 944 | "color": "#989898", 945 | "bg": "#e3e3e3", 946 | "shadow": "none" 947 | } 948 | } 949 | } 950 | } 951 | }, 952 | "navbar": { 953 | "fontSize": "1rem", 954 | "paddingY": "0.5rem", 955 | "paddingX": "1rem", 956 | "nav": { 957 | "link": { 958 | "paddingX": "0.5rem", 959 | "height": "auto" 960 | } 961 | }, 962 | "brand": { 963 | "fontSize": "1rem", 964 | "height": "auto", 965 | "paddingY": "auto" 966 | }, 967 | "toggler": { 968 | "paddingY": "0.25rem", 969 | "paddingX": "0.75rem", 970 | "fontSize": "1rem", 971 | "borderRadius": "2px" 972 | }, 973 | "themes": { 974 | "dark": { 975 | "color": "rgba(255,255,255,0.75)", 976 | "hoverColor": "#fff", 977 | "activeColor": "#fff", 978 | "disabledColor": "#989898", 979 | "toggler": { 980 | "borderColor": "rgba(255,255,255,0.1)" 981 | } 982 | }, 983 | "light": { 984 | "color": "inherit", 985 | "hoverColor": "#076fe5", 986 | "activeColor": "#076fe5", 987 | "disabledColor": "#989898", 988 | "toggler": { 989 | "borderColor": "rgba(0,0,0,0.1)" 990 | } 991 | } 992 | } 993 | }, 994 | "pagination": { 995 | "gutter": "0.25rem", 996 | "sizes": { 997 | "default": { 998 | "button": { 999 | "paddingY": "0.25rem", 1000 | "paddingX": "0.25rem", 1001 | "minWidth": "1.625rem", 1002 | "lineHeight": 1 1003 | } 1004 | }, 1005 | "sm": { 1006 | "button": { 1007 | "paddingY": "0.25rem", 1008 | "paddingX": "0.25rem", 1009 | "minWidth": "1.5rem", 1010 | "lineHeight": 1 1011 | } 1012 | }, 1013 | "lg": { 1014 | "button": { 1015 | "paddingY": "0.5rem", 1016 | "paddingX": "0.5rem", 1017 | "minWidth": "2rem", 1018 | "lineHeight": 1 1019 | } 1020 | } 1021 | }, 1022 | "variants": { 1023 | "default": { 1024 | "root": { 1025 | "default": { 1026 | "borderRadius": "0.25rem" 1027 | } 1028 | }, 1029 | "button": { 1030 | "default": { 1031 | "color": "#181818", 1032 | "bg": "#fff", 1033 | "border": { 1034 | "color": "#c5c5c5", 1035 | "width": "1px" 1036 | }, 1037 | "borderRadius": "0.25rem" 1038 | }, 1039 | "hover": { 1040 | "color": "#076fe5", 1041 | "bg": "#e3e3e3", 1042 | "border": { 1043 | "width": "1px", 1044 | "color": "#c5c5c5" 1045 | } 1046 | }, 1047 | "active": { 1048 | "color": "#fff", 1049 | "bg": "#076fe5", 1050 | "border": { 1051 | "width": "1px", 1052 | "color": "#076fe5" 1053 | } 1054 | }, 1055 | "disabled": { 1056 | "color": "#8b8b8b", 1057 | "bg": "#e3e3e3", 1058 | "border": { 1059 | "width": "1px", 1060 | "color": "#c5c5c5" 1061 | } 1062 | } 1063 | } 1064 | } 1065 | } 1066 | }, 1067 | "popper": { 1068 | "bg": "#fff", 1069 | "border": { 1070 | "width": "1px", 1071 | "color": "#d5d5d5" 1072 | }, 1073 | "shadow": "0 0 10px 1px rgba(0,0,0,0.2)", 1074 | "fontSize": "0.875rem", 1075 | "borderRadius": "0.25rem", 1076 | "header": { 1077 | "bg": "#fff", 1078 | "color": "inherit", 1079 | "paddingY": "0.625rem", 1080 | "paddingX": "0.625rem" 1081 | }, 1082 | "body": { 1083 | "color": "#050505", 1084 | "paddingY": "0.5rem", 1085 | "paddingX": "0.75rem" 1086 | }, 1087 | "arrow": { 1088 | "color": "#fff", 1089 | "outerColor": "#d5d5d5" 1090 | } 1091 | }, 1092 | "paper": { 1093 | "bg": "#f0f0f0", 1094 | "color": "#050505", 1095 | "paddingX": 0, 1096 | "paddingY": 0, 1097 | "border": { 1098 | "width": 0, 1099 | "color": "transparent" 1100 | } 1101 | }, 1102 | "progress": { 1103 | "fontSize": "0.65625rem", 1104 | "bg": "#e3e3e3", 1105 | "borderRadius": "0" 1106 | }, 1107 | "slider": { 1108 | "sizes": { 1109 | "default": { 1110 | "root": "0.125rem", 1111 | "thumb": "0.875rem" 1112 | }, 1113 | "sm": { 1114 | "root": "0.125rem", 1115 | "thumb": "0.875rem" 1116 | }, 1117 | "lg": { 1118 | "root": "0.25rem", 1119 | "thumb": "1.5rem" 1120 | } 1121 | }, 1122 | "variants": { 1123 | "default": { 1124 | "root": { 1125 | "bg": "transparent", 1126 | "border": { 1127 | "width": 0 1128 | } 1129 | }, 1130 | "track": { 1131 | "bg": "#a8a8a8", 1132 | "borderRadius": "50rem" 1133 | }, 1134 | "progress": { 1135 | "default": { 1136 | "bg": "#076fe5", 1137 | "borderRadius": "50rem" 1138 | } 1139 | }, 1140 | "thumb": { 1141 | "default": { 1142 | "bg": "#fff", 1143 | "border": { 1144 | "color": "#076fe5", 1145 | "width": "2px" 1146 | }, 1147 | "borderRadius": "50%" 1148 | }, 1149 | "hover": { 1150 | "border": { 1151 | "color": "#005eca", 1152 | "width": "2px" 1153 | } 1154 | }, 1155 | "focus": { 1156 | "shadow": "0 0 0 2px #fff, 0 0 0 3px #000" 1157 | } 1158 | } 1159 | } 1160 | } 1161 | }, 1162 | "table": { 1163 | "color": "#050505", 1164 | "bg": "#f0f0f0", 1165 | "border": { 1166 | "color": "#c5c5c5", 1167 | "width": "1px" 1168 | }, 1169 | "head": { 1170 | "fontSize": "1rem", 1171 | "bg": "transparent" 1172 | }, 1173 | "cell": { 1174 | "default": { 1175 | "paddingX": "1rem", 1176 | "paddingY": "0.5rem" 1177 | }, 1178 | "sm": { 1179 | "paddingX": "1rem", 1180 | "paddingY": "0.5rem" 1181 | } 1182 | }, 1183 | "variants": { 1184 | "striped": { 1185 | "bg": "#f0f0f0" 1186 | }, 1187 | "dark": { 1188 | "color": "#f0f0f0", 1189 | "bg": "#050505", 1190 | "border": { 1191 | "color": "#828282" 1192 | }, 1193 | "head": { 1194 | "bg": "transparent" 1195 | } 1196 | } 1197 | } 1198 | }, 1199 | "tooltip": { 1200 | "fontSize": "0.8125rem", 1201 | "maxWidth": "360px", 1202 | "color": "#000", 1203 | "bg": "#d5d5d5", 1204 | "borderRadius": "0.125rem", 1205 | "border": { 1206 | "width": "1px", 1207 | "color": "#a8a8a8" 1208 | }, 1209 | "boxShadow": "0 0 10px 1px rgba(0,0,0,0.2)", 1210 | "opacity": 1, 1211 | "paddingY": "0.25rem", 1212 | "paddingX": "0.5rem", 1213 | "arrow": { 1214 | "color": "#d5d5d5", 1215 | "border": { 1216 | "width": "1px", 1217 | "color": "#a8a8a8" 1218 | } 1219 | } 1220 | }, 1221 | "navButtonGroup": { 1222 | "variants": { 1223 | "default": { 1224 | "root": {}, 1225 | "item": { 1226 | "default": { 1227 | "color": "#181818", 1228 | "bg": "#fff", 1229 | "border": { 1230 | "width": "1px" 1231 | }, 1232 | "borderRadius": "0.25rem" 1233 | }, 1234 | "hover": { 1235 | "bg": "#f0f0f0", 1236 | "borderRadius": "0.25rem" 1237 | }, 1238 | "disabled": { 1239 | "color": "#8b8b8b", 1240 | "bg": "#e3e3e3", 1241 | "border": { 1242 | "color": "#c5c5c5" 1243 | }, 1244 | "borderRadius": "0.25rem" 1245 | } 1246 | } 1247 | }, 1248 | "primary": { 1249 | "root": { 1250 | "bg": "#076fe5", 1251 | "borderRadius": "1.5rem" 1252 | }, 1253 | "item": { 1254 | "default": { 1255 | "color": "#fff", 1256 | "bg": "transparent", 1257 | "border": { 1258 | "width": "0px", 1259 | "color": "transparent" 1260 | } 1261 | }, 1262 | "hover": { 1263 | "bg": "transparent", 1264 | "border": { 1265 | "width": "0px", 1266 | "color": "transparent" 1267 | } 1268 | }, 1269 | "disabled": { 1270 | "color": "#8b8b8b", 1271 | "bg": "transparent", 1272 | "border": { 1273 | "width": "0px", 1274 | "color": "transparent" 1275 | } 1276 | } 1277 | } 1278 | }, 1279 | "tertiary": { 1280 | "root": {}, 1281 | "item": { 1282 | "default": { 1283 | "color": "#181818", 1284 | "bg": "transparent", 1285 | "border": { 1286 | "width": "0px", 1287 | "color": "transparent" 1288 | } 1289 | }, 1290 | "hover": { 1291 | "color": "#076fe5", 1292 | "bg": "transparent", 1293 | "border": { 1294 | "width": "0px", 1295 | "color": "transparent" 1296 | } 1297 | }, 1298 | "disabled": { 1299 | "color": "#8b8b8b", 1300 | "bg": "transparent", 1301 | "border": { 1302 | "width": "0px", 1303 | "color": "transparent" 1304 | } 1305 | } 1306 | } 1307 | } 1308 | } 1309 | } 1310 | }, 1311 | "arcgis": { 1312 | "boxShadow": "0 1px 2px 0 rgba(0,0,0,0.20)", 1313 | "components": { 1314 | "button": { 1315 | "variants": { 1316 | "default": { 1317 | "default": { 1318 | "color": "#363636", 1319 | "bg": "#f0f0f0" 1320 | }, 1321 | "hover": { 1322 | "color": "#076fe5", 1323 | "bg": "#f0f0f0" 1324 | }, 1325 | "active": { 1326 | "color": "#fff", 1327 | "bg": "#076fe5" 1328 | }, 1329 | "disabled": { 1330 | "color": "#8b8b8b", 1331 | "bg": "#f0f0f0" 1332 | } 1333 | }, 1334 | "secondary": { 1335 | "default": { 1336 | "color": "#076fe5", 1337 | "bg": "transparent", 1338 | "border": { 1339 | "width": "1px", 1340 | "color": "#076fe5" 1341 | } 1342 | }, 1343 | "hover": { 1344 | "color": "#fff", 1345 | "bg": "#076fe5", 1346 | "border": { 1347 | "color": "#076fe5" 1348 | } 1349 | }, 1350 | "active": { 1351 | "color": "#fff", 1352 | "bg": "#076fe5", 1353 | "border": { 1354 | "color": "#076fe5" 1355 | } 1356 | }, 1357 | "disabled": { 1358 | "color": "#8b8b8b", 1359 | "bg": "#e3e3e3", 1360 | "border": { 1361 | "color": "#c5c5c5" 1362 | } 1363 | } 1364 | } 1365 | } 1366 | }, 1367 | "input": { 1368 | "bg": "#fff", 1369 | "color": "#000", 1370 | "border": { 1371 | "color": "#c5c5c5", 1372 | "width": "1px" 1373 | }, 1374 | "placeHolderColor": "#8b8b8b", 1375 | "focus": { 1376 | "borderColor": "#076fe5", 1377 | "boxShadow": null 1378 | } 1379 | }, 1380 | "menu": { 1381 | "bg": "#f0f0f0", 1382 | "border": { 1383 | "color": "#c5c5c5", 1384 | "width": "1px" 1385 | }, 1386 | "borderRadius": "0.125rem", 1387 | "item": { 1388 | "default": { 1389 | "color": "#050505", 1390 | "bg": "#f0f0f0", 1391 | "border": { 1392 | "width": 0 1393 | } 1394 | }, 1395 | "hover": { 1396 | "bg": "#d5d5d5" 1397 | }, 1398 | "active": { 1399 | "bg": "#d5d5d5" 1400 | } 1401 | } 1402 | }, 1403 | "panel": { 1404 | "color": "#363636", 1405 | "bg": "#f0f0f0" 1406 | }, 1407 | "table": { 1408 | "root": { 1409 | "color": "#050505" 1410 | } 1411 | }, 1412 | "updatingIndicator": { 1413 | "bg": "transparent", 1414 | "progress": "#076fe5" 1415 | } 1416 | }, 1417 | "widgets": { 1418 | "layerlist": { 1419 | "root": { 1420 | "bg": "#f0f0f0", 1421 | "color": "#181818" 1422 | }, 1423 | "item": { 1424 | "default": { 1425 | "bg": "#f0f0f0", 1426 | "border": { 1427 | "color": "#b6b6b6" 1428 | } 1429 | }, 1430 | "disabled": { 1431 | "color": "#8b8b8b" 1432 | } 1433 | }, 1434 | "actionsList": { 1435 | "root": { 1436 | "bg": "#e3e3e3", 1437 | "color": "#050505" 1438 | }, 1439 | "item": { 1440 | "default": { 1441 | "color": "#363636" 1442 | }, 1443 | "hover": { 1444 | "color": "#076fe5", 1445 | "bg": "transparent" 1446 | }, 1447 | "active": { 1448 | "color": "#f0f0f0", 1449 | "bg": "#076fe5" 1450 | } 1451 | }, 1452 | "separator": { 1453 | "color": "#d5d5d5", 1454 | "width": "2px" 1455 | } 1456 | }, 1457 | "icon": { 1458 | "default": { 1459 | "color": "#363636" 1460 | }, 1461 | "hover": { 1462 | "color": "#076fe5", 1463 | "bg": "transparent" 1464 | }, 1465 | "active": { 1466 | "color": "#f0f0f0", 1467 | "bg": "#076fe5" 1468 | } 1469 | } 1470 | }, 1471 | "legend": { 1472 | "variants": { 1473 | "default": { 1474 | "root": { 1475 | "color": "#181818" 1476 | } 1477 | }, 1478 | "card": { 1479 | "root": { 1480 | "color": "#181818", 1481 | "bg": "#f0f0f0" 1482 | }, 1483 | "carousel": { 1484 | "bg": "#d5d5d5" 1485 | }, 1486 | "caption": { 1487 | "bg": "#d5d5d5" 1488 | } 1489 | } 1490 | } 1491 | }, 1492 | "basemapGallery": { 1493 | "root": { 1494 | "color": "#181818", 1495 | "bg": "#f0f0f0" 1496 | }, 1497 | "item": { 1498 | "hover": { 1499 | "bg": "#d5d5d5", 1500 | "border": { 1501 | "color": "#d5d5d5" 1502 | } 1503 | }, 1504 | "active": { 1505 | "bg": "#e6f2ff", 1506 | "border": { 1507 | "color": "#076fe5" 1508 | } 1509 | }, 1510 | "focus": { 1511 | "bg": "#d5d5d5", 1512 | "border": { 1513 | "color": "#d5d5d5" 1514 | } 1515 | } 1516 | } 1517 | }, 1518 | "measure": { 1519 | "measurement": { 1520 | "bg": "#e3e3e3", 1521 | "valueColor": "#000", 1522 | "disabledColor": "#989898" 1523 | } 1524 | } 1525 | } 1526 | } 1527 | } -------------------------------------------------------------------------------- /widgets/add-layers/README.md: -------------------------------------------------------------------------------- 1 | # Add layers 2 | 3 | This widget demonstrates how to add a layer to a map programmatically. Step-by-step instructions for building this widget can be found in the [ArcGIS for Developers Tutorials](https://developers.arcgis.com/labs/experiencebuilder/get-map-coordinates/). 4 | 5 | ## How to use the sample 6 | 7 | Clone the [sample repo](https://github.com/esri/arcgis-experience-builder-sdk-resources) and copy this widget's folder (within `widgets`) to the `client/your-extensions/widgets` folder of your Experience Builder installation. 8 | 9 | ## How it works 10 | 11 | Within `widget.tsx`, a reference to the Map object is acquired using the `JimuMapViewComponent` module. That reference is used in the `formSubmit` function when a `FeatureLayer` is created based on the layer URL and added to the map via the `jimuMapView`. 12 | 13 | ```js 14 | // First create the Feature Layer from the URL that is in the box. 15 | const layer = new this.FeatureLayer({ 16 | url: this.state.featureServiceUrlInput, 17 | }); 18 | 19 | // Add the layer to the map (accessed through the Experience Builder Data Source) 20 | this.state.jimuMapView.view.map.add(layer); 21 | ``` 22 | 23 | In this sample, the ArcGIS API for JavaScript modules are loaded asynchronously (also known as "lazy-loading"), via the `jimu-arcgis/loadArcGISJSAPIModules` module: 24 | 25 | ```js 26 | // Lazy-loading (only load if/when needed) the ArcGIS API for JavaScript modules 27 | // that we need - only once the "Add Layer" button is pressed. 28 | loadArcGISJSAPIModules([ 29 | "esri/layers/FeatureLayer", 30 | "esri/tasks/support/Query", 31 | "esri/geometry/SpatialReference", 32 | ]).then((modules) => { 33 | [this.FeatureLayer, this.Query, this.SpatialReference] = modules; 34 | ``` 35 | -------------------------------------------------------------------------------- /widgets/add-layers/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomToLayer": true 3 | } 4 | -------------------------------------------------------------------------------- /widgets/add-layers/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /widgets/add-layers/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "add-layers", 3 | "label": "Add Layers", 4 | "type": "widget", 5 | "version": "1.10.0", 6 | "exbVersion": "1.10.0", 7 | "author": "Esri R&D Center Beijing", 8 | "description": "This widget demonstrates how to add a layer to a map programmatically.", 9 | "copyright": "", 10 | "license": "http://www.apache.org/licenses/LICENSE-2.0", 11 | "properties": {}, 12 | "translatedLocales": ["en"], 13 | "defaultSize": { 14 | "width": 400, 15 | "height": 200 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /widgets/add-layers/src/config.ts: -------------------------------------------------------------------------------- 1 | import { ImmutableObject } from "seamless-immutable"; 2 | 3 | export interface Config { 4 | zoomToLayer: boolean; 5 | } 6 | 7 | export type IMConfig = ImmutableObject; 8 | -------------------------------------------------------------------------------- /widgets/add-layers/src/runtime/translations/default.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | _widgetLabel: "Add Layers", 3 | addLayer: "Add Layer", 4 | featureServiceUrl: "Feature Service URL", 5 | instructions: 6 | "Copy/paste a FeatureService Layer URL here to add it to the map." 7 | }; 8 | -------------------------------------------------------------------------------- /widgets/add-layers/src/runtime/widget.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /** 3 | Licensing 4 | 5 | Copyright 2022 Esri 6 | 7 | Licensed under the Apache License, Version 2.0 (the "License"); You 8 | may not use this file except in compliance with the License. You may 9 | obtain a copy of the License at 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 15 | implied. See the License for the specific language governing 16 | permissions and limitations under the License. 17 | 18 | A copy of the license is available in the repository's 19 | LICENSE file. 20 | */ 21 | import { React, AllWidgetProps, css, jsx } from "jimu-core"; 22 | import { 23 | loadArcGISJSAPIModules, 24 | JimuMapViewComponent, 25 | JimuMapView, 26 | } from "jimu-arcgis"; 27 | 28 | import { IMConfig } from "../config"; 29 | 30 | import defaultMessages from "./translations/default"; 31 | 32 | interface IState { 33 | featureServiceUrlInput: string; 34 | jimuMapView: JimuMapView; 35 | } 36 | 37 | export default class Widget extends React.PureComponent< 38 | AllWidgetProps, 39 | IState 40 | > { 41 | // Give types to the modules we import from the ArcGIS API for JavaScript 42 | // to tell TypeScript what types they are. 43 | FeatureLayer: typeof __esri.FeatureLayer; 44 | Query: typeof __esri.Query; 45 | SpatialReference: typeof __esri.SpatialReference; 46 | 47 | state = { 48 | featureServiceUrlInput: "", 49 | jimuMapView: null, 50 | }; 51 | 52 | // Every time the input box value changes, this function gets called. 53 | // We set our component's state so we can use the value in the formSubmit function. 54 | handleFeatureServiceUrlInputChange = (event) => { 55 | this.setState({ 56 | featureServiceUrlInput: event.target.value, 57 | }); 58 | }; 59 | 60 | formSubmit = (evt) => { 61 | evt.preventDefault(); 62 | 63 | // Error cases 64 | if (!this.state.jimuMapView) { 65 | // Data Source was not configured - we cannot do anything. 66 | console.error("Please configure a Data Source with the widget."); 67 | return; 68 | } 69 | if (this.state.featureServiceUrlInput == "") { 70 | // Nothing was typed into the box! 71 | alert("Please copy/paste in a FeatureService URL"); 72 | return; 73 | } 74 | 75 | // Lazy-loading (only load if/when needed) the ArcGIS API for JavaScript modules 76 | // that we need - only once the "Add Layer" button is pressed. 77 | loadArcGISJSAPIModules([ 78 | "esri/layers/FeatureLayer", 79 | "esri/rest/support/Query", 80 | "esri/geometry/SpatialReference", 81 | ]).then((modules) => { 82 | [this.FeatureLayer, this.Query, this.SpatialReference] = modules; 83 | 84 | // First create the Feature Layer from the URL that is in the box. 85 | const layer = new this.FeatureLayer({ 86 | url: this.state.featureServiceUrlInput, 87 | }); 88 | 89 | // Add the layer to the map (accessed through the Experience Builder Data Source) 90 | this.state.jimuMapView.view.map.add(layer); 91 | 92 | // After the layer is created, zoom to the layer's extent, if the setting is set for that. 93 | layer.on("layerview-create", (event) => { 94 | if ( 95 | this.props.config.hasOwnProperty("zoomToLayer") && 96 | this.props.config.zoomToLayer === true 97 | ) { 98 | const query = new this.Query(); 99 | query.where = "1=1"; 100 | query.outSpatialReference = new this.SpatialReference({ 101 | wkid: 102100, 102 | }); 103 | layer.queryExtent(query).then((results) => { 104 | this.state.jimuMapView.view.extent = results.extent; 105 | }); 106 | } 107 | 108 | // Process of adding the layer is complete - remove the layer URL from the box so we can add another 109 | this.setState({ 110 | featureServiceUrlInput: "", 111 | }); 112 | }); 113 | }); 114 | }; 115 | 116 | render() { 117 | const style = css` 118 | form > div { 119 | display: flex; 120 | justify-content: space-between; 121 | input { 122 | width: 100%; 123 | } 124 | button { 125 | min-width: 100px; 126 | } 127 | } 128 | `; 129 | return ( 130 |
131 | {this.props.hasOwnProperty("useMapWidgetIds") && 132 | this.props.useMapWidgetIds && 133 | this.props.useMapWidgetIds.length === 1 && ( 134 | { 137 | this.setState({ 138 | jimuMapView: jmv, 139 | }); 140 | }} 141 | /> 142 | )} 143 | 144 |

{defaultMessages.instructions}

145 | 146 |
147 |
148 | 154 | 155 |
156 |
157 |
158 | ); 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /widgets/add-layers/src/setting/setting.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | /** 3 | Licensing 4 | 5 | Copyright 2022 Esri 6 | 7 | Licensed under the Apache License, Version 2.0 (the "License"); You 8 | may not use this file except in compliance with the License. You may 9 | obtain a copy of the License at 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 15 | implied. See the License for the specific language governing 16 | permissions and limitations under the License. 17 | 18 | A copy of the license is available in the repository's 19 | LICENSE file. 20 | */ 21 | import { React, FormattedMessage, css, jsx } from "jimu-core"; 22 | import { AllWidgetSettingProps } from "jimu-for-builder"; 23 | import { Switch } from "jimu-ui"; 24 | import { 25 | MapWidgetSelector, 26 | SettingSection, 27 | SettingRow 28 | } from "jimu-ui/advanced/setting-components"; 29 | import { IMConfig } from "../config"; 30 | import defaultMessages from "./translations/default"; 31 | 32 | export default class Setting extends React.PureComponent< 33 | AllWidgetSettingProps, 34 | any 35 | > { 36 | onZoomToLayerPropertyChange = (evt: React.FormEvent) => { 37 | this.props.onSettingChange({ 38 | id: this.props.id, 39 | config: this.props.config.set("zoomToLayer", evt.currentTarget.checked) 40 | }); 41 | }; 42 | 43 | onMapWidgetSelected = (useMapWidgetIds: string[]) => { 44 | this.props.onSettingChange({ 45 | id: this.props.id, 46 | useMapWidgetIds: useMapWidgetIds 47 | }); 48 | }; 49 | 50 | render() { 51 | const style = css` 52 | .widget-setting-addLayers { 53 | .checkbox-row { 54 | display: flex; 55 | justify-content: space-between; 56 | margin-bottom: 8px; 57 | } 58 | } 59 | `; 60 | return ( 61 |
62 |
63 | 70 | {/* 71 | 72 |
{this.props.intl.formatMessage({id: 'sourceDescript', defaultMessage: 'set an interactive map **'})}
73 | 74 | */} 75 | 76 | 80 | 81 | 82 | 83 | 89 | 90 |
91 |
92 | 98 | 105 |
106 |
107 | 108 | 109 |
110 |
111 | ); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /widgets/add-layers/src/setting/translations/default.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | settings: "Settings", 3 | zoomToLayer: "Zoom to layer", 4 | selectMapWidget: "Select Map widget" 5 | }; 6 | --------------------------------------------------------------------------------