Als u in vijf minuten een moderne, snelle, toegankelijke en responsieve applicatie wilt maken zijn de apps van ArcGIS Instant Apps de manier om dit te bereiken. De apps zijn gefocust op een specifiek doel en blinken daarin ook uit. Het zijn rechttoe-rechtaan applicaties die vervolgens te gebruiken zijn in andere applicaties zoals ArcGIS Hub of de Experience Builder.
Doordat de programma’s zijn toegespitst op een specifiek doel is er weinig configuratiewerk nodig om een goede applicatie te maken. Dit kan echter ook voor beperkingen zorgen. Zo verschillen per applicatie de mogelijkheden om aan te sluiten bij de huisstijl. Wanneer de standaard mogelijkheden niet toereikend zijn kan er gebruik worden gemaakt van een regel Aangepaste CSS.
Werkwijze
Bij het embedden van een instant app in een andere applicatie kan het wenselijk zijn om onderdelen van de applicatie, zoals de header of een inputpaneel, niet te tonen. Wanneer bijvoorbeeld de input voor het ‘in de buurt’-template door middel van een Experience wordt ingevuld, kan het inputpaneel worden verborgen in de applicatie, iets dat met de standaard configuratiemogelijkheden geen optie is.
In CSS documentatie, bijvoorbeeld op w3schools.com, staat hoe een element verborgen kan worden. Dit kan onder andere met de code ‘display: none;’.
Om te bepalen hoe het te verbergen element heet, kan deze geïnspecteerd worden in de browser. Dit kan door met de rechtermuisknop op het element te klikken en te kiezen voor ‘Inspect’. Vervolgens opent het F12-paneel met de verschillende elementen op de browserpagina en de bijbehorende stijl.
Hover over de verschillende elementen en selecteer het juiste element wanneer deze oplicht. Onder ‘Styles’ is nu de juiste naam van het element te vinden. In dit geval ‘#refinePanel’.
Nu duidelijk is welke expressie nodig is om het element te verbergen en de naam van het element duidelijk is, kan deze informatie worden toegepast in de applicatie. In de regel voor Aangepaste CSS kan ‘#refinePanel’ { display: none; } worden toegevoegd om dit paneel te verbergen.
Alternatief
Het is ook mogelijk om in het Styles-paneel te testen hoe de aanpassingen er in de praktijk uit komen te zien door dit rechtstreeks in het paneel aan te passen of toe te voegen. Deze aanpassingen worden weergegeven op de pagina, maar niet opgeslagen in de applicatie. Een voorbeeld hiervan is de header van de Category Gallery.
Wanneer het uiterlijk van de applicatie helemaal naar wens is, kan deze code gekopieerd worden uit het Styles-paneel en vervolgens worden geplakt in de aangepaste CSS-regel.
Het toevoegen van aangepaste CSS is een goede manier om de applicatie te personaliseren en geschikter te maken voor een specifiek doel. De flexibiliteit met deze functionaliteit is enorm. Het is daardoor een risico dat aanpassingen de werking van de applicatie aantasten. Het niet weergeven van elementen in de applicatie kan er bijvoorbeeld voor zorgen dat de applicatie niet meer goed functioneert, en het aanpassen van de afmetingen van een element kan als neveneffect hebben dat een applicatie niet meer goed in het scherm past. Ondanks deze kanttekeningen is het toevoegen van aangepaste CSS een krachtige manier om de Instant App naar een hoger niveau te tillen.
