|
POST
|
RJ Sunderman, by chaining Multicardinal Field Splitter processors, I can handle the stream of data exactly how I need. Thank you for your help! Matej
... View more
08-28-2020
02:33 AM
|
0
|
0
|
1932
|
|
POST
|
Thank you RJ Sunderman for your detailed explanation of processing a hierarchical multicardinal XML data structures. I do have some questions on issues I'm having using the Multicardinal Field Splitter. I have a geoevent definition like this: And I need to split every event by the groupOfLocations.globalNetworkLinear.linearWithinLinearGNElement attribute. But it seems, the Multicardinal Field Splitter has some problems with splitting on attributes which are nested in a hierarchy: Do you have any idea how to setup this correctly? Thanks, Matej
... View more
08-26-2020
01:38 AM
|
0
|
3
|
2031
|
|
BLOG
|
Začátkem roku 2020 přišla první verze dlouho očekávané aplikace ArcGIS Experience Builder (ExB), prostředí, pro tvorbu vlastních webových aplikací bez nutnosti programování. Přestože aplikace přináší mnoho nového (flexibilní a responzivní layout, ArcGIS JS API 4.x, 2D/3D, …), první verze ExB, ve srovnání s „vyzrálou“ aplikací ArcGIS Web AppBuilder (WAB), zatím zaostává ve funkcionalitě. Je to sice jenom otázka času, kdy Esri implementuje funkcionalitu WAB i do ExB, my se však podíváme na to, jak funkcionalitu ExB rozšířit již dnes. Využijeme k tomu verzi ExB určenou pro programátory.
Nebojte, nebudeme zde skutečně programovat. Pouze si vysvětlíme základní koncepty a nainstalujeme si prostředí, ve kterém můžete začít programovat vlastní widgety později
Co k tomu budeme potřebovat?
Aplikaci ArcGIS Experience Builder (Developer Edition), kterou si můžeme stáhnout zde. Poté postupujeme podle návodu k instalaci, který je podrobně popsán v dokumentaci.
Instalace ExB je v dokumentaci rozdělena na dvě části:
client (služba pro vývoj widgetů) – zajišťuje kompilaci/transpilaci zdrojových kódů widgetů do produkční formy, pomocí nástroje Webpack.
server (služba pro provoz ExB) – zajišťuje dostupnost ExB na adrese https://localhost:3001 při konfiguraci aplikací.
U konce každé části je uvedeno, že máme použít příkaz npm ci (tím nainstalujeme potřebné knihovny pro danou službu) a pak npm start (tím spustíme danou službu). Instalaci knihoven udělejte pro obě služby (client a server), spuštění pak pouze pro službu server (službu client budeme spouštět později).
Pozn. Příkazem npm start se spustí odpovídají služba a příkazový řádek zůstane zablokován. Po jeho zavření (nebo Ctrl+C) bychom spuštěnou službu ukončili. Proto ponechte příkazový řádek se spuštěnou službou server otevřen.
Po správné instalaci bychom měli být schopni spustit ExB na svém počítači, ve webovém prohlížeči, na adrese https://localhost:3001. Je tomu jinak? Napište do komentářů pod článkem.
Po spuštění ExB nás aplikace vyzve, abychom zadali URL adresu portálu (ArcGIS Online, nebo ArcGIS Enterprise) a také ID aplikace (toto bychom měli znát, pokud jsme prošli instalací ExB dle dokumentace). Po přihlášení se do portálu je ExB připraven.
Pozn. Propojení ExB s portálem nám umožní, abychom při konfiguraci aplikací mohli využít dostupný obsah portálu v podobě webových map a mapových vrstev (dat) a dalších služeb, které portál nabízí.
ArcGIS Experience Builder (Developer Edition) nám umožňuje rozšířit funkcionalitu aplikací ExB o vlastní widgety. Přestože je ExB stavěn na základech ArcGIS API for JavaScript 4.x, které samo obsahuje řadu widgetů, tyto widgety mají odlišné API než ExB widgety a nejsou v prostředí ExB automaticky dostupné. Neznamená to však, že bychom je v ExB využít nemohli. Proto se teď zaměříme na to, jak dostat widget ArcGIS JS API do prostředí ExB. Konkrétně se bude jednat o widget Print, který v ExB zatím chybí.
Co budeme potřebovat dál?
Pokud nemáme, nainstalujeme si aplikaci Visual Studio Code, ve které můžeme prozkoumávat zdrojové kódy widgetu a taky vyvíjet widgety vlastní. Mohli bychom použít i libovolný textový editor, připravili bychom se ale o komfort, který VS Code nabízí (podpora TypeScript, IntelliSense, …) a to určitě nechceme.
Abychom nezačínali od nuly, začneme od konce a do prostředí ExB si vložíme již hotový widget Print, kterého projekt je připraven v prostředí GitHub, zde. Buď si jej stáhneme v ZIP a obsah archivu umístíme do adresáře <exb>\client\your-extensions\widgets\exb-widget-print, nebo použijeme nástroj Git a po jeho instalaci zavoláme z příkazové řádky, s umístěním v adresáři <exb>\client\your-extensions\widgets\, příkaz git clone https://github.com/mvrtich/exb-widget-print.git. Výsledkem by měl být adresář <exb>\client\your-extensions\widgets\exb-widget-print, který obsahuje adresář src a soubory manifest.json, config.json a další.
Teď spustíme aplikaci VS Code a otevřeme (File>Open Folder) adresář <exb>\client\. Následně zobrazíme příkazový řádek (View>Terminal) a zavoláme v něm příkaz npm start. Tento příkaz, jak již víme, spustí ExB službu client (webpack), která zkompiluje zdrojové kódy našich widgetů a zůstane běžet a monitorovat další změny. Jakákoliv změna zdrojových kódů widgetů vyvolá jejich re-kompilaci. Protože se budeme zaměřovat spíš na porozumění konceptů než psaní vlastního kódu, můžeme příkaz po dokončení kompilace ukončit (Ctrl+C).
Za předpokladu, že nám pořád běží příkazový řádek se spuštěnou ExB službou server, měli bychom být schopni náš nový widget Print použít při tvorbě vlastní aplikace.
V prostředí ExB, na adrese https://localhost:3001, si vytvoříme nový projekt (Vytvořit nový) a použijeme např. šablonu Skládací. V aplikaci pak widget mapy propojíme s nějakou webovou mapou z portálu, ke kterému jsme v ExB připojeni (označit widget mapy a v pravé části pak Vybrat mapu). V pravé horní části aplikace pak vložíme náš nový widget Tisk pomocí tlačítka plus (+). Označením přidané ikony widgetu Tisk v aplikaci se v pravé části ExB zpřístupní UI pro konfiguraci widgetu. Náš widget Tisk potřebuje nastavit propojení s mapou (Widget mapy) a volitelně pak URL tiskové služby (ve výchozím nastavení je použita tisková služba portálu, ke kterému jsme v ExB připojeni). Po propojení s mapou by měl být widget Tisk funkční. Můžeme si to ověřit přepnutím ExB do režimu Živé zobrazení (nahoře), kdy budeme moct s konfigurovanou aplikací interagovat.
Kdybychom chtěli výslednou aplikaci zpřístupnit uživatelům, je třeba aplikaci nasadit na produkční webový server. Postup je uveden v dokumentaci.
Jak asi již tušíme, ExB očekává naše vlastní widgety v adresáři <exb>\client\your-extensions\widgets. Každý widget je reprezentován samostatným adresářem, kterého název nesmí obsahovat mezery a má danou strukturu.
Pozn. Vytvoření základní struktury nového ExB widgetu nám může usnadnit nástroj @arcgis/cli.
A z čeho se skládá náš ExB widget Tisk?
<exb-widget-print>\manifest.json – takový rodný list widgetu. Je zde uveden název widgetu (musí být stejný jako název adresáře widgetu), verze ExB a další informace. Pro náš widget Tisk je důležité, že je zde uvedena závislost na knihovně „jimu-arcgis“. ExB tak zajistí, že náš widget bude mít po spuštění dostupné moduly ArcGIS API for JavaScript, ze kterých čerpá funkcionalitu. Více informací zde.
<exb-widget-print>\icon.svg – ikona widgetu zobrazena v prostředí ExB.
<exb-widget-print>\config.json – výchozí hodnoty konfigurace widgetu. V našem případě je zde pouze atribut printServiceUrl, který je prázdný. Proto se při konfiguraci widgetu v ExB zobrazuje ve výchozím stavu prázdné textové pole a widget je naprogramován tak, aby v takovém případě použil výchozí tiskovou službu portálu.
<exb-widget-print>\src\config.ts – definice datových typů konfigurace widgetu. Musí odpovídat tomu, co je uvedeno v souboru config.json. V našem případě je zde řečeno, že atribut printServiceUrl je typu string.
<exb-widget-print>\src\setting\setting.tsx – zdrojové kódy konfigurace widgetu (to, co vidí tvůrce aplikace, při konfiguraci widgetu v prostředí ExB).
<exb-widget-print>\src\runtime\widget.tsx – zdrojové kódy widgetu (to, co vidí uživatel, při použití widgetu ve výsledné aplikaci).
ArcGIS Experience Builder je naprogramován v jazyce TypeScript a pro implementaci widgetů využívá React a další technologie. Proto je i náš widget naprogramován v jazyce TypeScript a jedná se prakticky o React komponentu (widget.tsx). Volitelně pak může obsahovat další React komponentu (setting.tsx), která slouží jako UI pro konfiguraci widgetu v prostředí ExB. Samotný ExB nabízí také vlastní knihovnu, Jimu. Ta obsahuje řadu modulů usnadňujících tvorbu UI vlastních widgetů, integraci na ostatní widgety a mnoho dalšího.
Náš widget Tisk je tedy React komponenta, která "obaluje" widget Tisk z ArcGIS JS API. ExB naší React komponentě zajišťuje mnoho schopností, jako je lokalizace, konfigurace, layout a tematizace, ale také propojení na datové zdroje a další komponenty v aplikaci. Toho naše komponenta využívá a po propojení s widgetem Mapa v rámci konfigurace, tuto mapu použije pro konfiguraci widgetu Tisk z ArcGIS JS API. Tento widget pak umístí na odpovídající HTML element pro vyrenderování. O zbytek se stará widget Tisk z ArcGIS JS API.
Veškeré widgety z ArcGIS JS API mají oddělenou aplikační logiku (ViewModel) od UI (View). Kdybychom chtěli, aby náš ExB widget Tisk vypadal zcela jinak než widget Tisk z ArcGIS JS API, ale funkčně nám vyhovoval, můžeme v rámci ExB widgetu využít pouze PrintViewModel a vlastní UI řešit v naší React komponentě. Je toho tolik, co nám může knihovna ArcGIS JS API 4.x při implementaci vlastních ExB widgetů nabídnout.
Více informací o psaní vlastních widgetů pro ArcGIS Experience Builder lze najít v dokumentaci. Najdeme zde i řadu ukázek widgetů, které představují různé možnosti implementace vlastní funkcionality a začínají se objevovat i tutoriály na webu ArcGIS for Developers.
Happy Widgeting!
... View more
07-17-2020
07:01 AM
|
7
|
0
|
2044
|
|
POST
|
David Martinez and Gavin Rehkemper, thank you for your help in this. The main issue in my case was missing the arcgis dependency in the ExB widget's manifest file. "dependency": ["jimu-arcgis"] After adding this dependency, I can use my custom js api widget in the ExB widget. However, if I my custom js api widget uses the dojo/i18n module for localization, the ExB cannot load the localization files of the custom js api widget. The "Template" widget from the sample project attached at the beginning of this thread is an example of custom js api widget with localization files. Anyway, I already rewritten my js api widget as ExB widget and have to say, it was the best learning experience. I'm just curious, if there is some way to solve this without the rewrite. Thanks, Matej
... View more
06-18-2020
12:47 AM
|
0
|
0
|
546
|
|
POST
|
Hi, I like the https://github.com/Esri/calcite-components project as it includes a rich set of components to build the UI/UX from. Its possible to integrated the @esri/calcite-components into the ExB, however it requires to modify the ExB's webpack config to include the @stencil/webpack plugin. I am wondering if the ExB core team have some plans in this direction. Thank you, Matej
... View more
06-09-2020
03:04 AM
|
0
|
1
|
953
|
|
POST
|
Hi, The "jimu-ui/date-picker" component returns incorrect value to onChange event handler. Maybe its related to locale, as I use "cs" (Czech) locale in my environment. The value returned is 1 month plus the date selected from the calendar UI. It seems the "jimu-ui/date-picker" is just a wrapper around the "react-datepicker" component to give it UI/UX consistency with other ExB components. If this is true, then the "jimu-ui/date-picker" should have the same API as the "react-datepicker", but it has not (selected vs startDate prop, different value from onChange event, and more). Here is an example of both components: <FormGroup> <Label>React Date Picker</Label> <ReactDatePicker locale="cs" dateFormat="d. M. yyyy" selected={this.state.date} onChange={(date) => { this.setState({ date }); }} /> </FormGroup> <FormGroup> <Label>ExB Date Picker</Label> <DatePicker startDate={this.state.date} onChange={(value) => { this.setState({ date: new Date(value) }); }} /> </FormGroup> Both components render the date correctly. However, only the React DatePicker returns correct date from the onChange event. ExB DatePicker returns a number as value from the onChange event, and this is 1 month plus the date selected from the calendar. React DatePicker returns a date as value from the onChange event and the date is correct. It would be nice to have more documentation for the Jimu UI components in the ExB SDK (examples of usage and overall API of components). I am aware of the Theme Builder page (Theme Builder), but its not sufficient to use as the reference. Thanks, Matej
... View more
06-09-2020
02:49 AM
|
0
|
1
|
1946
|
|
POST
|
Hi David, I am looking forward to your reply. Thanks, Matej
... View more
05-27-2020
05:36 AM
|
0
|
0
|
2218
|
|
POST
|
Hi David, I understand that the widget for ExB has to be a React based widget. That's the reason why I wrap my custom JS API widget inside an ExB widget as showcased in the sample from your SDK. I took my custom JS API widget transpiled files (no webpack, just tsc compiler), placed them in my custom ExB widget folder (your-extensions\widgets\my-custom-widget\src\runtime\lib) and then imported my custom JS API widget inside the ExB widget: import Template from "./lib/Template"; const template = new Template({ view: this.mapView, container: this.apiWidgetContainer }); When I run the ExB app in a runtime mode and open the widget, systemjs error is logged in a console as it fails to load a dojo/i18n module from my custom JS API widget. My custom JS API widget is using dojo/i18n module to load nls files (JS API widgets use dojo/i18n to manage localization files). So, I did another test. I created second JS API widget without nls files (no dojo/i18n module) and wrapped it inside the ExB widget. Then, in a runtime of the ExB app, this error message is logged in a console: "WidgetWithoutI18n_1.default is not a constructor" (WidgetWithoutI18n is my custom JS API widget). It seems that ExB's module loader has some problems loading my custom JS API widget files. I attach my custom JS API widgets project, you can have a try. There are two widgets inside: - Template - widget with nls files - WidgetWithoutI18n - no nls files Thank you, Matej
... View more
05-22-2020
01:17 AM
|
0
|
6
|
2218
|
|
POST
|
Hi David, Yes, it is a custom widget written using the JS API. As the JS API has its own widget framework, the idea is to encapsulate the custom functionality using this framework to use it in custom JS API apps outside the ExB scope. However, it would be handy to reuse this custom JS API widgets in ExB by wrapping them. Do you say that using custom JS API widgets (no React, just JS API widget framework) in ExB is not supported, because of dojo? Thanks, Matej
... View more
05-21-2020
02:01 PM
|
0
|
9
|
2218
|
|
POST
|
Hi, I have a custom widget written in JS API 4.x and I followed the https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/samples/js-api-widget to wrap the widget inside an ExB widget. Let's assume the custom JS API widget is called Template and the build/transpiled files structure is: - \Template.js - \Template\TemplateViewModel.js - \Template\nls\Template.js - \Template\css\Template.css Then I followed these steps to add the widget into the ExB: - added the custom widget's transpiled files into the ExB widget's lib folder (your-extensions\widgets\my-custom-widget\src\runtime\lib) - imported the custom widget inside the ExB widget class (import Template from "./lib/Template") - create the widget instance as showcased in the sample mentioned above Then, in runtime of the ExB application, loading the widget fails on systemjs.js fetching nls/localization files of the custom JS API widget. As my custom JS API 4.x widget imports its localization files using dojo/i18n!./Template/nls/Template, this does not work while wrapping the widget inside an ExB widget. What is the best practice to wrap custom JS API widgets inside an ExB widgets? Thanks, Matej
... View more
05-20-2020
06:31 AM
|
0
|
11
|
3027
|
|
POST
|
Dobrý den, Jak uvádí Radek Kuttelwascher, nejjednodušší je přidat GPX data do mapy v prostředí aplikace ArcGIS Map Viewer. Vytvoří se nová mapová vrstva. Aby bylo možné různé mapové vrstvy z GPX dat porovnávat, případně kombinovat, je třeba mapovou vrstvu, vytvořenou z GPX dat, v prostředí aplikace Map Viewer uložit (viz. printscreen). K tomu je ovšem potřeba, aby měl uživatel odpovídající oprávnění k vytváření obsahu v portálu. Matej
... View more
05-11-2020
02:03 AM
|
0
|
1
|
2349
|
|
POST
|
Hi Andrew, This expression is working for me (use SQL Mode in Pro's Definition Expression settings): gpstime >= 'now-24h' The Spatiotemporal BDS is built on top of the Elasticsearch technology where I found this: Range query | Elasticsearch Reference [7.4] | Elastic . Hope it helps, Matej
... View more
10-21-2019
04:09 AM
|
0
|
0
|
1473
|
|
POST
|
Thank you David, the same applies to Vertical Sidebar widget. Regards, Matej
... View more
08-22-2019
01:38 AM
|
0
|
0
|
2512
|
|
POST
|
Hi David, OK, let me try to explain my intention. I need a single page app with a collapsible side panel and a full size map. So I grabbed the Horizontal Panel widget as it has a collapsible side panel and a content panel. The problem is, the UI settings in ExB does not allow me to set 100% height of any content inside the side panel or the content panel. Any widget you drop inside a left or right side of a Horizontal Panel is wrapped with a Row by default and the Row does not have any height settings (exb-horizontal-sidebar-row-style.png). You can only set a fixed height of a content inside the panels (exb-horizontal-sidebar-map-style.png), but it's not responsive. You can see the sandbox app here: https://experience.arcgis.com/stemapp/79aad0f703774c0db9bae9cdb2e46b7a. Thanks, Matej
... View more
08-21-2019
04:27 AM
|
0
|
0
|
2512
|
| Title | Kudos | Posted |
|---|---|---|
| 2 | 11-02-2025 10:58 AM | |
| 1 | 12-02-2022 12:18 AM | |
| 5 | 02-27-2025 12:39 AM | |
| 1 | 04-22-2024 01:00 PM | |
| 2 | 09-20-2024 01:19 AM |
| Online Status |
Offline
|
| Date Last Visited |
Monday
|