Deep-Customization of Hub Sites and Enterprise Sites

hi everybody and welcome to deep customization of hub and enterprise sites my name is Graham Hudgens and I'm a product engineer on the hub team and with me as Justin Prather our design lead for hub and enterprise sites we have a great agenda for you we're gonna walk through at a really high level a quick overview of the two applications we'll take a look at a lot of examples and then we'll get into the nitty-gritty with creating your site in the content library and best practices around data designing or layout with tips and tricks some of the great two-way engagement features available in hub premium and we'll end with some integration resources ways to automate both some of the things we do today as well as other things as well as ways to integrate hub functionality into your own website platform and we'll leave you with lots of resources so feel free to use this agenda as a sort of way to skip around if you're looking for something specific so ArcGIS hub is an easy to configure cloud platform for organizations to collaborate with their communities to accomplish information driven initiatives and/or projects the key here is we're trying to engage with the non GIS user using these websites to coordinate some of your information from ArcGIS online very similarly rgeous Enterprise Sites is a capability in enterprise that lets you make the same websites and webpages to also feature content from your portal to the non GIS audience so kind of the similar type of user is going to be using this application to get at some of your portal or are just online content rjs hub is a part of artists' online included in two flavors there's the basic version which has the sites and pages capability which can be used for open or private data sharing and we have hub premium which we'll talk about later it adds primarily the ability to sign up community identities so that they can attend events follow your sites participate with some privately shared content via teams or provide feedback or even edit some your feature data so kind of reaching out and working with people outside of your organization enterprise sites is very similar in that it extracts that hub website and page tech and puts it in your enterprise to claim it and I often get asked when to use either so hub is great if you can use our Jess online there's no credit burning or consumption of people using the sites frequently that's all on as read to manage so it's kind of nice in that way hub also leads enterprise sites and features and functionality kind of nature of the Beast of being an online product as we can release to it as soon as features already whereas enterprise gets features twice a year hub is optimized for the web we've done some things to make sure your pages and sites are ranked high in Google if they're public and we also catch certain resources in our content distribution network for advanced performance and it contains three sub systems that aren't yet in enterprise those are we can support multiple custom domains in the hub application we also have an expanded download system which can go from your your data stored in your feature services into a variety of formats for public data and we have an improved search experience over the platform these are all things we're gonna try to fold into enterprise sites but it's gonna take this a little time hub also has the hub premium functionality we'll talk about later so if you're on the enterprise side site side of the house you might consider using that if your IT policy prevents you from using ArcGIS online you know you need to be on your own network with full control of all the great pieces of our Jeff's Enterprise the web adapter the portal all the different components of server and whatnot so now I'm going to turn it over to Justin no better way to get started than to get a part of a possible and Justin's gonna walk us through some examples so Justin why don't you take it away Thank You Graham let's walk through hub examples first here's a theme we'll explore throughout the coming examples hub is used by ArcGIS online and enterprise customers primarily to build bridges between their existing outward facing digital presence and their authoritative data when leveraged well hub fills the gap of a system that empowers you to inform listen and monitor your goals and how your audience engages with those goals over the past few slides here I've shown you how the city of raleigh north carolina connected the dots they built a bridge between their existing raleigh government site and our authoritative data by using hub to inform and engage their community and to monitor goals together so what's possible with hub and building communication bridges what are people building well let's take a look up sites across the globe vary in their visual design layout storytelling goals functionality and content internally it's difficult to know how organizations are leveraging hub as they're obviously not publicly accessible however we know from interacting with these customers that they're working on very similar patterns as those who are external I'm gonna show you three types of examples of sites first I'll show you sites that are blending and integrating into existing web properties second I'll show you examples featuring custom branding last we'll look at how sites are building bridges through and forming engaging and monitoring whether your site is external or internal there's a great opportunity to blend and integrate your hub site into your organization's website or content management system or your organization central wiki or SharePoint in either case you had the opportunity to connect your hub site to what your audience already knows and trust as your digital presence here's two quick examples of our clients linking from their existing sites to their web sites here we have the website of Mayor Muriel Bowser of Washington DC at Mayor DC gov as we scroll through her site we see information about the mayor press releases news then when we get down to this section by the numbers we see six areas of topics if we go into any of these topics we're taken to Washington DC's Maine hub site opened a to DC we're on a specific page that they've created for these areas of topics just a highlight again Washington DC has integrated their hub site into one of their main existing web properties next let's go on to Johns Creek Georgia on their services and resources page you'll notice two things that are very prominent first visually they have a large image that has promise shown there Johns Creek data hub and the screenshot of that laptop that someone's typing on second you have a link Explorer Johns Creek data hub right there this is on their existing site a very apparent visual a very apparent call-to-action to go to their website so as we take that action we will arrive at data hub Johns Creek gov where we can explore their authority of data now I want to demonstrate a few integration tactics that people are using with their sites I'm gonna call that two things first users are leveraging custom URLs and second they're aligning with their organization's branding guidelines now other branding guidelines might include fonts colors layout patterns logos and more and depending on your specific organization you might have strict or loose branding guidelines that you must buy too so let's speed walk through three sites and see how they're blending in with their organization's existing websites we're going to look at the hub user lab the state of Maryland and nature serve shameless plug time this is the hub user lab this is a program run by my team where people can sign up to participate in helping us improve the hub product now pay attention to the URL hub user lab is recom we purposely added a custom URL for this hub so that the ESRI comm domain would land inherent credibility to our program if you'd like to participate come here to this URL and sign up today you'll notice here the Maryland logo Maryland colors this is their main government site at Maryland gov this is their hub site for Maryland Department of Transportation State Highway Administration they have many hub sites for various projects around the state of Maryland notice here how the colors have the logo are coming into their site next we have nature serve you'll notice here within nature serve their color their logo their fonts and how at their hub site how those colors logos and fonts are also very evident this is a really fun section for me given that part of my background is in advertising some of our clients are personalizing their sites through custom branding first I'll show you examples of sites with branded names then I'll show you sites with custom logos here we have the main hub site for the city of Los Angeles the Los Angeles EU hub geo hub is probably one of the more common branding terms that we see for our clients you'll also notice the custom URL at the top geo haba LA City org trustworthiness baked right into the URL let's return to Johns Creek Georgia and their data hub data hub is the way that they have branded their main hub site you'll also notice their custom URL of data hub Johns Creek GA gov next we have the Africa geoportal also notice they don't have a subdomain they have a whole URL owned for the sub site geoportal is another fairly common branding that we have found for hub sites here's another site that we've already seen open data DC two things here I wanted to note for you first they're describing or branding their site as open data this is probably the most common branding or way to describe a website that we've seen second what a beautiful logo that they've used next we'll go on to the City of Brampton Ontario in Canada pay attention to the name geo hub the logo and the custom URLs I started talking about hub building communication bridges and showed how Raleigh is doing that by informing engaging and monitoring but now let's go deeper let's explore some other examples here's the hub site for the California State geoportal the site features data from all across California it allows users to explore data by categories very visually here we have the main hub site for the City of Tempe this is where they are informing their public of all of their GIS open data you can explore the data through categories or search here we have a hub site for the city of Topeka Kansas this is one site they call open budget where they are informing their public about the operating budget for the city this is one of a few hub sites that Topeka is using to inform their public I also want to call out their usage of a custom URL budget Topeka org now on to examples of engagement here's volunteer Escondido Escondida uses this hub site to engage with its community / volunteer opportunities in the city not only can people learn about volunteer opportunities they can suggest other ways to volunteer sign up to volunteer and can register to attend events Escondido is also capturing and communicating metrics on volunteer activity one shared story is a nonprofit in rural Virginia focused on creating an inclusive community they're engaging their Fluvanna County community through this hub site by enabling people to report on historic cemeteries and to share personal family stories that represent hidden narratives of the county's history the urban would reuse is an initiative by Washington DC where the city takes trees that need to be removed and were purposely schools they are reducing waste and giving the trees a second chance not only can you request a wood product for your school but you can monitor the progress of the initiative in the city now to complete our circuit of examples here are sites demonstrating monitoring of goals here we have a site for the city of Zwolle in the Netherlands this initiatives purpose is to mobilize residents to measure conditions relevant to climate change does well a community can get involved and monitor the progress of the initiative next we have a site out of Columbia focused on the goal of planting 5 million trees this site informs Colombian citizens about the initiative and allows them to monitor the progress of reaching its goal next we have another site from Escondido California homelessness and housing through their Community Advisory Group through this site the city is communicating the current state of homelessness equipping citizens with resources enabling the community to share ideas and providing metrics to monitor lastly did you know that Tucson Arizona is currently in a solar blitz well here's a site where the city is not only informing the public about solar projects they are also equipping citizens to monitor the progress of installations in the city now I'll send it back to Graham to talk about the basics of building a site so let's get going with the basics and my recommendation here is to build something with no plan to get a feel for things just to get a quick orientation around the app we'll fly through this section since probably most of you are here for some deeper insight than that and if you're interested in more detail here check out the getting started with hub and enterprise sites video instead but to make your first site you'll need to be a creator user with these privileges and optionally if you can have these two privileges here at the bottom you'll be able to even more things like getting others involved in your sites and pushing users into groups as you share your content via the hub and sites teams feature if you're looking for the app it's in the app launcher in ArcGIS online or portal and currently an online we have a sites option in the create menu and when you go to this app you'll land on this screen called overview which is how you can return to your previous work and serves as a sort of Lighthouse for all of the sites that you've created within enterprise sites or so let's take a really quick look at that Here I am in ArcGIS online and you can see I can come up here to hub and when I click that I'm taken to overview and this is where I can see here in the left-hand side my recent I can see some cards if I have hub premium I get this extra card here as well as premium dashboard about all of the community users have signed up and if I wanted to make a site I'll click this new button and I'll be able to either make one via a name and clicking create or I can if I have hub Premium click browse templates and browse template sites this is a feature that we're hoping to add to enterprise in an upcoming release so say I pick this citizen problem reporter template and I activate it now I get landed on the sites layout and well there will always be a starter layout but you can totally customize the site from here once you're in a particular site you have this blue bar and edit navigation and there's very different sections of each site each with their own purpose depending on which application you're using hub premium or how basic or enterprise sites the list may be a little shorter just depending on the features so I'm gonna give you a quick overview of each of these areas we'll just fly through it the dashboard exposes some key analytics and is only available in online because we can centralize analytics about your sites for you we have the team section which exposes the ability to bring others into your site by default we make a core team if you have the right user privileges and inside of each team you can add members which behind-the-scenes is just sharing the item via a group so just kind of a convenience function you'll notice I can use as many to go back to the site and I can keep browsing using the edit navigation to events events is where I can create events and these are basically places that you can use to sign up your community users to attend a specific physical event so and events a description and that can pick who's organizing it where it'll happen and I can also pick a time obviously and these can be unlimited or have fixed capacity and all that good stuff if you're interested in hearing more about engagement there is an engaging your community talk that you can search for that goes in a lot of depth about how to use the hub engagement feature events is definitely one of those features that is hub for hub premium so it's not yet in enterprise sites or it's not included in hub basic we give you an easy way to launch surveys so I can come here and click create a survey what's nice about the surveys I already have created is we also let you edit the survey in context of this edit navigation so really easy to browse to through to feedback and if I go down here to the community section you'll notice I have the hub premium ability to see who signed up for my community so that's a really really nice feature if I have people who followed by site they'll show up here and I can message them and provide updates and I can also force users to be followers if I want to there's a couple of use cases for that finally kind of the heavyweight section figuring out your site which we'll talk in a lot of detail about is the content library the content library is where you decide which items are going onto your site and are gonna be associated with your site and the content library has a nice twin here in the view of your site which is the search results page so you can kind of notice that I can decide the content I want to be on my site here in the content library and then I can see it on my site itself so coming back if I go and view the site you can see I have this kind home layout I have that search page I have my content library you know it's like kind of giving you a basic layout one last thing to mention is there's this pages function here so this is how I can make sub layouts for various different audiences they keep the header of the site but they give you a new layout so if you're trying to build a complex website this is a great way to do it and if you're ever trying to get away from one site and go to another you can use this darker blue menu to kind of browse the global objects so if you're in hub premium this will say initiatives but otherwise it'll say sites and I can come out to this menu and be like oh great there's other sites here to look at let me jump into one of those and now I can look at a wholly different site and get going with that one so I showed you a lot what happens behind the scenes when you make a site or initiative in the application is we make a bunch of items and groups and they each have different purposes the site application or site our hub site application is the primary item for that home layout this also is the item that we do Olaf with so you can host it on custom domains we make a number of groups by default the content group powers that content library and the catalog of items that are is attached to search please note you can bring on your own groups via the group manager so if you already have organized your portal content into groups you can pull those groups onto your site no problem the core team gives users edit access so it's how I can basically bring in other people to help me edit all of the content of my site and if you have premium we make another group to house the community users and other are just online users who are interested in a specific site so more of those engagement features every time I make a page I get an item and every time I make an event I get a group and a group for the events is the same thing as followers and so we can track who's interested what so hopefully it gives you a little bit of an overview if you wanted to have a list of it this is the same information presented that way and just gives you an example here on the right as to what you'll see in portal or the home application of our chess online when you create something okay so I've talked a little bit about the basics let's move into the next section which is the curation and I call this the hard part right like you have to decide a bunch of things upfront about your site once you know the application so I recommend kind of having a blueprint or having a plan there's this like old scuba-diver saying of plan the dive and dive the plan so I definitely think you should take a few minutes upfront to decide you know the audience and the purpose of your site here are some ideas so many many people start using the app to share data kind of privately or publicly for that non GIS audience that actually doesn't require too much of a time investment once you get the data set up and share it and all the group's wired up they get the site and then you can kind of move on with your life and do other things for a while some people treat it like a set it and forget it it's not always a good idea to do that people usually will kind of shy away from web properties that look like they're going stale so you might want to kind of periodically plan on revisiting those sites but it's kind of a more on the lower time estimate in terms of building a site like that if you're trying to do a project or a long-running program or something that's complicated with phases that happens maybe over months or years those sites will take more time to develop and it'll take a lot more time to pull in all the content you need for that and if you're trying to do a deep two-way engagement where you really attract people and you kind of keep the content moving and you get their involvement and they attend events that'll take more of your time to coordinate not necessarily in the site design area but more time kind of coming back to the app to make sure that it feels like a vibrant alive place that's engaging and again go check out the nother talk if you want to see more about how to build this so once you have your purpose in mind and you know your kind of audience I think of it as like oK you've designed a beautiful room and now we get to decide all of the different stuff we're gonna hang on the walls in that room all the different pieces of content we want to share so this is a kind of age-old portal or ArcGIS online workflow which is making items and you can do that in hub or online or in your portal and then sharing them to the group the content group that is pre-made with each site which then shows up as you saw under the search results of that site so this is the kind of workflow you're going to be doing to pick the artwork that's going on your wall so to speak if you're sourcing data from the platform obviously you know work with your departments work with your GIS colleagues search your portals or upload your own data very very easy you know to come into the platform here and upload spreadsheets URLs links PDFs powerpoints you name it so that's one great way to do it if you're trying to do something a little fancier from a development perspective we have this open source library called coop that I like to plug this is basically a stateless adapter from many different data sources that goes through to geo JSON so you can feed it into the platform you can also use it in Reverse so you can go from the platform back outward to different clients this is what's powering hubs download system so even though it's open source it's definitely not unmaintained and it's a vital part of the hub infrastructure so using it is gonna you know gain all the benefit from the hub teams work and making sure everything is functioning properly we have a number of providers so you can see here all the different types of things you can connect to like a Google sheet or an s3 bucket or another open data provider a lot of different options out of the box right here for you cool little story here like when hurricane Harvey happened everything happened so fast that we had a bunch of data going into Google form and it into a Google sheet and we wanted to be able to analyze that in the platform we were able to use coop really quickly to build an adapter from a Google sheet into the platform so we could get it into all the spatial analysis tools and all the other things that we wanted so pretty easy to deploy and it can run in something like lambda so definitely give it a look if you're looking for something to automate the data flowing into the system if you're sitting here and you're like I don't even know what data to share and I'm a local government the sunlight foundation publishes this list of open data sets even if you don't want to share these publicly just having these all centralized in your portal or ArcGIS online is it's a really good practice that can benefit your organization so even if you don't care about sharing all this out it's still a good idea to find these data sets digitize them and make them easy to discover internally and if you're in that enterprise space you know an enterprise site is a great way to feature all that for that non GIS chunk of your organization that doesn't really want to traverse the is but has interested let's say one of these datasets so that's a good list to go from so how does this work mechanically is it's gonna happen all in that content library so if I go to my content library you can see I already have some content in here but I can use this add existing content to find items that are in my my organization aren't just online or my portal and you know I can basically browse for items that I can see so you know I can pick random items here and what it does behind the scenes is it shares that item to the group and it will now show up if I X out of here you can see I now have more City Art Project data right here when ice thing about all the data and hub is that they each have a its own little lightweight item details page if the data is spatial in nature you'll get a map you can peruse the data users can download it so it's a again that GIS light and if you don't like any of the metadata at any page and you have access to you can log in and edit some content and then jump back to the content library so this is that kind of hard part of like I'm curating the data and I'm trying to get everything on to my site so that people can peruse and browse and it potentially you could have thousands of pieces of content the other thing you can do here as you can see I've done a little bit of as you can rename these tabs so this is like just the data maybe you don't call it datasets you want to call it because it's a non GIS audience you just want to call it data or maybe it's not documents you want to rename and call it like presentations or PDFs let's do PDFs you can actually make the little search facets these or we call them collections you can make them these configurable things that match the type of data that you're sharing on the site and if I X out of here you notice that it reflects on the circuit page as well this is coming to enterprise in ten eight one but it is already available in rjs online so it kind of gives you an idea about that so next part is pretty boring and I apologize for that but it's very important having housekeeping and thinking about the quality of your data and the metadata about that data um is just so critical these steps won't just benefit your hub or enterprise sites they'll and benefit your entire portal someone once told me great content makes great sites and that's true but it also makes great dashboards great story maps great experiences you name it so I'm sorry to lecture some data points at you but they're really important stuff so first and foremost you should humanize your attributes of your featured layers with attribute aliases the difference between the left and the right columns is that the right one is something other people that are not in GIS can understand whereas the left is like the census tract codes for example this can be done in pro or arcmap with the field alias option so go ahead and do that turning on editor tracking is a good idea because it gives more metadata about when the items change and the data changes and enabling metadata on your portal or ArcGIS online is a good idea too you can check the box in the items section of your org settings or your portal settings pick your standard and then once you do that and you set metadata in the home application you'll be able to get this link that launches you into the metadata from that sites page so you know that data set for crime incidents I can read more about the abstract as to what it is and who makes it really really useful for providing clarity about each of the attributes and things like that so for large data if you're gonna try to host a lot of data here and you want people to download it try to simplify and reduce the number of vertices which is a good idea for server age old thing that ESRI people say latest is greatest but we are definitely optimized for 10-5 and greater 10-5 was the version of server that added the stats function and the counting functions so without that a lot of features won't work so if you can get beyond 10-5 obviously do that but really going to be struggling if your belief below that version don't alter the default maximum number of records returned from server that can screw with our download system so don't do that unless you have to and if you do definitely test out your downloads and it can be tempting when you're working from Pro to publish all of your layers to one big service but that can cause problems and you'll be missing out on item metadata and all sorts of stuff so organize your layers into a service that represents each data set you're gonna get more control in the long run and if you've got to do it try to keep it under 20 layers to a service for performance reasons so I get this question too if you want to do a hybrid you can do that you can run the data in your server in enterprise and then register those items and online and use hub to run the online experience that's a good idea because you can keep the data connected to the system of record that may be on your servers but still leverage the web tier in the SAS product which absorbs the brunt of you know a lot of things and gives you caching and things like that I do advise you if you're in this mode to consider still syncing some data to ArcGIS online if its large or popular or if you want those extra download options because you know it's it's generally a good idea to not beat up your own servers but to use you know aren't just a line to absorb that so we hosting the data using portal to online sync or something like that is a great idea and I always like to tell people like are you hoarding credits because if you're hoarding credits are you ever gonna use them it's kind of like potions at the end of a video game like we didn't use it throughout the game then what was the point so ask yourself that about credits this is the point of credits is you know don't keep it all in enterprise just so you have an amazing credit balance this is you know hopefully a reason to use it that'll decrease your IT you know headache if something becomes popular overnight and you you know you won't have to deal with servers going down I get asked this a lot how do i download imagery we don't have a native imagery download function yet it's on our backlog but something I've seen people do which I really like is using web app builder or experience builder to make an imagery Explorer and downloader app so you can actually in your kind of content library rather than sharing the raw imagery to the site share this app that lets you download the data and then the users can filter to the right address for example click on the different images that they want download them each and then they'll be in good shape if you're interested in seeing some of these examples go to hub that our kiss comm which has a search for all public sites and type in imagery download and you'll see some these that are screenshot right here um so if you're now got your data it's got it at roots everything's good and you are doing open data consider licensing that data because if it's not licensed chances are academics and journalists won't be interested in it because they'll be worried about your lawyers so if you're looking for a licensing model and you don't have access to a lawyer I recommend Creative Commons they have this great choosing thing which lets you answer some questions so you can do that with your boss once you answer the questions you get a Creative Commons license which is a well-established legal way of licensing information you can copy that put it in your item details page under the Terms of Use and you get a badge on that on that that page on your site so it's all worth it and people recognize that and will be really comfortable with using your data if you do that custom licenses are also supported you can write whatever you want in that box and we'll display it so if you do have an army of lawyers behind you they can you know advise you on this and you can put in everything that they say there and they'll be happy and everything will be good one note here we are moving away from http aureus and ArcGIS online so that has a big implication for you we're gonna be HSTs on September 15th this year you need to scan your online content look for HTTP URLs you need to make sure your enterprise hosted data supports HTTPS because after this date ArcGIS online will no longer be able to work with that for security reasons there's a nice tool at trust ArcGIS comm that will scan your ArcGIS online instance for references to HTTP URLs across all of your items as an administrator so give that a look and be ready for September 15th ok so boring part is over nice job so do all that and you will benefit everybody using your portal so now we get to move on to bringing life to your data and I call it content curation part 2 you've done the data work now we want to make it interesting so it's a little morbid but we want our one hub to have many phases we want multiple ways that people can experience the same information if you just put all of your data on a site you're only getting at a subset of types of thinkers like you're only going to get the kind of and who thinks about data and uses data whereas a lot of people don't always think that way so I'll give you a good example the reason I we're recording this right now is because there's this virus going on and we have this website hosting information about the virus and we want people to look at this dashboard this is like the Mott in the main way we intend for people to consume this information but it not how everybody thinks I sent this site to my dad and he didn't get that he scrolled right past it I watched him do it and you know he started looking at some other stuff and what he ended up finding to be the most insightful was like the immersive you know things like story maps and other more visual you know things than just an embedded dashboard so he was really interested when he found a story map on this website so it just kind of gives you an idea give people a number of different ways to experience the same topic you know no matter what it is because you can jump in they can look at something like ooh like this is way way more approachable I can actually read top to bottom all about this this crisis and I don't have to you know look at a dashboard so one hub many faces bring life to your data if I'm gonna give you a bunch of ideas but effectively try to check a box in each of these four areas in formless and convene and monitor just like Justin will show you earlier so if you're informing we have a lot of great apps for that you can use the hub site you can use maps and scenes experiences story maps urban projects whatever they are pick the best kind of look that walks users through the information and always consider mixing and matching because of different people thinking different ways so use an experience to jump people into the immersive feature by feature look at a dataset you can use in those experiences put an address bar so people can find themselves that's very popular if it's static data you can use analysis to make it more interesting and I definitely recommend a story map on almost everything because it's going to attract that person who wants to see all the content portrayed in a narrative in order rather than kind of a like heart buffet where you can walk in at any point so put the why behind the site but all the data that's out there or at least a good healthy example and link into the site as appropriate to get access to more content there is this nice feature for doing this you saw it on that coronavirus site here it is in the screenshot it's on my default on sites but it's called app pages and it basically will embed the the app that you're previewing from a gallery or menu link underneath your header so you can keep the context of the site while you explore different ways of looking at the information that's on by default it's in the settings sidebar and if you don't like it you can turn it off as well so that's informing listening we want to use something like survey crowdsource reporter the quick capture app is really good for this in specific cases or geo forms you can listen for data you can listen for opinions you can help schedule your events with surveys again check out that engagement talk if you're interested in learning more about how listening and be made as a powerful tool to engage your community convening is a good idea especially if it's a public site trying to reach out about something hub events is a premium feature but it lets you launch events that each have their own page and you get access to extra layout cards that lets you embed them on your site to get people physically together about something and can take your engagement to the next level you can also brag about your engagement like these folks have done in escondido they're bragging about how many people they've signed up and all the different projects they're doing you know cetera upcoming so you can kind of channel that FOMO to get people to you know sign up or do something monitoring is the last step which just shows you're tracking something over time ops dashboard or experience builder are great for this you can also embed stat cards or chart cards we'll look at those in a little bit and you can also monitor yourself the whole site using something like Google Analytics in a hub basic and hub premium so here's just a few examples of those stat cards turn cards there's an example of a dashboard and there's a Google Analytics you can see the literal monitoring of how many times people are looking at your site what they're finding interesting using Google Analytics so if I'm going to do that in the app how does that happen well lots of ways right you can come into the content library and we have this new new menu that you can click do app and you can in here make an app of your choosing the nice thing about doing it from hub is it takes care of all the sharing to the right groups to get the app onto your site automatically so you can kind of pop in you know let's say make a story map about you know what this app is all about you know like why are we sharing this info to you today okay that's terrible but we're gonna publish it anyway to my organization you know and basically put the like you know give that experience of the data in different kind of shades using this capability once you're done with that you can kind of pop back which is nice and you can see that there's my app and it's not shared as part of my site and it's really nice it shows up under you know the site itself over in the apps and map section and then yeah if I had that app pages on I can just jump into it and there it is so bring some life to your data I definitely recommend making a bunch of different ways of experiencing the content alright so we've done all the work of making the data really good we've made the apps that make it more interesting now we get to put a bow on it we get to kind of tie all that together and make in a simple but powerful layout at the site editor so I always tell people you have five seconds to capture someone's attention with your site since you got a like make it personal let that top image really speak for you immediately encourage some sort of participation and try to keep it simple you notice in that coronavirus site that dashboard was prominent because that's what they wanted you to experience so I recommend the one thing you want people to do is highest on the page and you got to pick one it's got to be quote unquote above the fold you get the imagery up top you get what the site's about and then you can put the one thing you know right there visual upfront because everything else is like for the people who are bought in and are interested in other ways of looking at it or really want to engage so try to pull forward that at number one action you want people to accomplish within your site and this is the same for enterprise if you want people to know about the download capabilities or something like that you want people to access a specific layer or specific map or they want to see one of those apps put it prominent on the site but only use one so like these people wanted us to look at this chart these people want us to search and then maybe follow you know you can sketch this so tips from a designer you know what come up with a plan design what you think the one thing is do this as a good stakeholder exercise and you'll be a good shape so now you have your sketch and you have your primary objective now you can get into the mechanics of building the site itself and there's a lot of different sections to consider the first is the header which is the very top of the page it contains kind of the navigation system and the branding the header and the theme are a good place to start to figure out how we're gonna blend the site into its own you know into some other web property or something like that and then we have rose and the Rose really serve as chunks to hold the cards and we can pick however many rows we want and then fill them with the cards which are the different layout pieces that we could choose from and then last but not least is the footer which is where you can put legalese and stuff like that so hub and enterprise sites is built using bootstrap 3 and bootstrap is predominant CSS system it gives you a bunch of free functionality so to speak about half of the web uses bootstrap and way it works is you have these columns of 12 columns that you can place cards into and as the the site goes on to a mobile phone those columns will stack and reflow and you have these different grid sizes which can tell how big or small the content should be you can also use this to show and hide things if you're not familiar with this you should go to the website here and get familiar with the grid system even though our UI makes it easy to work with it's a good idea to know this if you're going to be doing deep customization so here you can see our UI adjusting the number of columns in use by default for a desktop view of these 3 stack cards and you can see mousing over those the seams let us choose how many columns so really easy to modify the bootstrap grid just to give you a demo of that let's jump back into our site here I think we were oh yeah right like where am I let's go back so I go back into the content library I can use this to get back to my site and this is where you see as I move my mouse around I'm getting the controls and I can these are cars and these are my rows here on the side and if I add some other cards like I want to put an image next to this search bar and dock it there and if I want the image to be smaller on the desktop view I can do that so you know if I wanted to upload something I could once I save that if I want to be what I can notice as I go mobile eventually will restock down and site editor does this as well so you get some editing controls too but this is effortless right you can just design your layout and the bootstrap grid system is gonna make it mobile responsive as long as you use the out-of-the-box cards that's really really nice alright so let's go through those cards and give you some tips on each one not a guide of how to use them but more of some extra little insights that go with each card so first is setting a theme find your brand guidelines you know don't pick a dramatic font even if you like it it's hard to read test every page on your site so don't just make the design choices here and just look at the WYSIWYG editor that's up right here make sure you view the site and go down to something like the search page and make sure the theme works here too then go into a data set and make sure the theme looks good here as well and if you pass all three of those places you're in pretty good shape the only other place to watch out for is on the site itself if you have any pages pages that are being used apply the same theme so notice this button is that green shade it's getting that from the site it's being used from so definitely check all that out there's a list of those and you can always find somebody in the organization whose job this is and ask them what to do so the road card we talked about tips and tricks here is you can like override the theme that you've just picked just for a specific row to make things pop and you can also do edge to edge background images which let you know you get that banner effect so setting an image on the row gives you that background image and you can do a nice parallax effect too as you scroll the image can stay fixed and it can look like pains are flying down in front of it so check out the row images if you're interested in those sorts of effects wide verse box is an opinion but I like wide four rows containing something fullscreen ish like an app a map or a video and I like box for other content like that image and that search bar we were just looking at and the final cool thing is there's this thing called rogue class name so if you're trying to do some really cool CSS down here in the appearance section at the very bottom we have this CSS class this is gonna let you target that row with CSS and do really really nice things so look at that a little bit actually right now so one example of that is if I want this row to be hidden on mobile phones I can use a bootstrap class and save it and what's going to happen is as I minimize this down to mobile the row just vanishes so you can apply classes that come out of the box with bootstrap and that's really really convenient so that's a good idea if you're interested in something like that the text card gives you the most advanced layout choices I say deep custom happens here you know this is how you can visually edit HTML you're gonna want to use that bracket code mode and there's some bootstrap text examples and other examples on Google you know effectively this is the you know most customizable card because you can just literally write code right into your site this is gonna be where you can find the greatest power but also the greatest responsibility so to speak and you can also insert some bootstrap examples which is nice because then you can jump into code mode and see how they work so you know this is gonna be how you customize the site more deeply here's that hidden class that I just showed you good idea to show and hide rows and do things like that you can also use that on your custom HTML to get better mobile support the other one that's good to know is image responsive which makes the image fill the bootstrap container and respond to the changing shape of the container as it goes down on a mobile phone so we've really useful classes if you're not sure what I'm talking about or you're looking for something specific google bootstrap 3 and then the name of the thing you're trying to do and you'll find some great examples on the web like bootstrap 3 drop-down good example I recommend you test your custom HTML and your site in general for accessibility which is at a 11 why there's contrast checking is a good idea also running a chrome lighthouse audit is a good idea because it will give you a score and will give you suggestions the other thing to plug here is the axe extension it to gives you more more information in your chrome inspector if you're able to put that on your computer you'll be able to test and it'll help you remember some best practices the image card is pretty self-explanatory you don't want to use it if you're trying to get edge to edge you just want to use it for that image next to that search bar watch out for HTTPS as I just mentioned earlier the scale image to fill is that image responsive and you'll have to see how that works to understand but basically I'll fill the container and then the image will shrink so it has a focal point if you're trying to center it on a specific part of the image as it reshapes and you know looks on the phone it looks good on desktop and don't forget your alt text and keep the images keep the sharing level of the site or page they're attached to so you could put sensitive information like financial information or screenshots here if you want to and the site is private the images aren't going anywhere else except for the item that they're attached to where to find good images you probably own some so start there you can also screen shot your own current content I recommend unsplash and excells spelled their PE XD LS because they don't require attribution you can also use something like Flickr which does and that means you have to put something maybe in your footer for that same thing with the noun project if you don't pay for them you have to attribute them so you use your footer for that if you're interested so then the other area the the cards is like showing some of the content that you've already curated but on the layout so I kind of break this down into these three blocks I have lots of items use the search and category card because that pushes the user into the search experience which is a great thousands of items searching UX like it's really really good don't do a gallery card with yard saleing amounts of content because it just doesn't get engaged with if you have a small number like on that coronavirus site we were looking at use a gallery card and if you're trying to get people to experience that one or map use an iframe app card survey card one of those will be great because it'll let you embed them directly okay so we should hiding with the rows but you can also do some cool fancy things with the gallery card so what's nice is if I have a gallery card I can pick the literal items that are showing on it in manual mode so if I want to pick like you know more apps here I can add it and I get three cards now this will honor the visibility settings of those items so if my user can see all three I'll see all three but if I can't only see one then I will only get a single card and as you saw the gallery card also is responsive so it'll reflow back into the right shape they also will collapse into nothing if there is nothing returned for a user so you can hide content quote-unquote in plain sight for users of differing access levels all right extending the hub is a popular thing you guys are in the deep custom talk the iframe is the best way to do it if you want to use JavaScript because you'll have to host the JavaScript and the HTML and the CSS for your widget somewhere on the web and once you have it hosted somewhere you can then hide frame it in and you can do a great many things I've seen people iframe whole business intelligence Suites like tableau or power bi this way I've also seen people build specific one-off things if you're in enterprise and you're interested some people piggyback on the web adapter and host their content there so that's an idea and this is an example from Johns Creek where they just wanted to show a dynamic HTML table we didn't have support for that so they built it and they hosted it somewhere and then they embedded it the chart card is a good way to do charts summarizing your future services that are on server version 10 5 or greater you can also extend this there's a library called cedar and it has a specification that's JSON and you can pick your service and customize your chart and this is basically a union of arcgis and a library called a.m. charts so you can take a look at those libraries and build some pretty powerful data visits without writing a lot of javascript code you can just configure your JSON and you'll be able to have a nice custom chart summary stack card does the same thing as a turn card but it just counts or does stuff like that it supports filtering and I get questions sometimes like I wanted to do some really cool styling I recommend you actually I frame a one widget dashboard instead so this is like a top stash words but what's nice about that is it'll mobile-responsive reflow down on a mobile phone and you get the full power so if you're looking for a really extendable summery stack card I would use ops dashboard in one widget mode and then embed it in your site the media cards good for YouTube or Vimeo simply by pasting a link and it's pretty self-explanatory social media card is the same thing and accept any social feed Twitter stream or anything like that in the banner card I'm not even gonna mention it I think you should use a text card and a search card instead because you'll get a more extensible user experience this is one of those cards that we sort of have a love-hate relationship with it we know some of you love it so it's here it's a Jumbotron card with the search and a heading but I think you're gonna get a more precise design if you use a text card in the search card next let's talk about choosing a header system at a high level you want to use your site editor to integrate multiple sites into one logical site maybe internally this is a SharePoint or wiki or confluence you can use your enterprise site to blend that into one of those existing SharePoint sites but it could also be a kind of a corporate or organizational overall brand property like for ESRI OB ESRI com so you can use your header in this way to blend in so that users will stumble into the GIS part of the website and not really feel like they've left anywhere in gladsome are different you can also use your header to feature multiple languages this is where you write a exact replica of the site in each language that you want and then in the header have consistent links to those different language sites this can be a useful way to translate your site's content into multiple languages taking a quick look the options for out-of-the-box headers are standard and prominent which gives you different layouts here you can choose how wide the content goes you can set a logo as well as you know positioned some of the information and then I really like this menu bar links area for the private kind of content this is really nice if the user can't see an item it just doesn't show up here and this has a nice mobile reflow pattern if you're interested in this sort of thing you can write your own custom HTML and CSS there's a great summary of this feature where we go in-depth into getting started with hub and enterprise sites talk in the latter half of that talk by developer Rob Steinberg so please give that a look if you're interested in writing your own HTML he's got a lot of great tips for you in that in that video so let's move on to Home Premium these are the features that allow identity enabled sharing to your external community so we'll talk through what those features are and how it all works behind the scenes when you license hub premium your existing ArcGIS online organization this blue one here on the left or your employees org gets attached to a whole new ArcGIS online organization for your community and you can brand your community just like Justin was talking about earlier however you want the idea here is were insulating the community members from your staff organizations data and content and they have a separate pool of things like credits and storage and access and you can set different sign-in rules for your community work on the left hand side this is where all of your data apps and maps will continue to live and you'll continue to use users from this org but you'll be able to work with the users that are signed up on your community side so you have to kind of think about how will I sign people up do I want them to come to me in some cases or in other cases you might know who they are and you'll invite them literally you will literally have a login for your employee org and an administrator account for community org and you'll be able to basically manage these users as if they were just an extension of your digital workforce so as I mentioned there's two ways to get users you can either have them sign up or you can invite them in if you sign up you can have them do it via Google or Facebook or email account and if your country or your region has a community identity provider that supports sam'l for example like France connects kind of thing you can set that up here as well and then having an identity and that system will allow them to get an account in your community or um you can of course not do any of that and decide I already know who I want to work with and in which case you'll log into our JSON line as that community organist rater and you will issue invitations and this is very popular for like nonprofits who know who they're already gonna be engaging with ahead of time I get this question a lot what can they do well they're creators in the platform so you got to kind of think broadly here's a couple of ideas but there's a lot of different use cases it's just like they had their account and it could be shared to so they can receive access to private content this is popular if you want to share sensitive information you want to be sure the recipient is who they say they are they can contribute to your organization's data so you could share access to feature services or you can give survey forms to people you trust so that they can make edits and it's updating the data inside your organization they can attend events and receive notifications similar they can follow they can also even help you edit your website if you find somebody who knows HTML or CSS and once they volunteer they can also help write apps and they can also manage your events but this is not the full list of things they can do they can really do anything that the platform allows so I you know use this as an idea generating tool but don't use this as an authoritative source so let me show just a couple of how that manifests in the hub so the overview if I have hub premium like I do on this organization here I can see all of my community members down here I can also go to a list of all of my community members and I'll see I have 178 community members and I could peruse them I can also you know login and this is where that second sign-in happens so if I have a community administrator account I'm actually double logging in and when I do that I gain access to all the private community members that don't have their profile set publicly and I can also do things like downloading their contact information or messaging them directly here in the application so at a high level you can kind of see how many users you're signing up for in their community here on the community overview I go to settings this is where I can use my double login to configure the sign-in experience for both organizations so by this this hub for example I want people to sign up with Facebook Google or email so it has both these buttons prominently it also has this no account create a hub community account which leads you to this form I can also include you know my own custom legal Terms of Use this is what needs to be checked when somebody signs up for an account so this is where your you know legal team can help out and write a specific criteria and finally if you're interested in you can set a logo some people miss it but it's right there you can expand the logo and you can change the esri logo to your brand's so this is where you can say if you don't want this to be enabled you can turn off all of these settings and this basically makes it just so that you have to have an invite to the community order to be able to log in and none of that other stuff really applies to your sign-in so I'm not going to do that I'm going to leave it all on because I want to be that kind of 2-way engagement hub and within each site you you can have people click the star that's on the site which is really nice if I view this site and let's go down to mobile you can see I have this core team messages can unfollow their initiative this is where I can follow or unfollow when people do that in the community section I'll get signed people who are signed up here so let's take a look at what it's like to follow if I go to this site in incognito go to it not incognito sign out if I click follow over here on the Left I can sign in with my Google account which I have already created one but this is my community user Google and now I'm following this this site back on this side as the person working for the city I log out and login you'll notice I have a follower and I can do all the same kind of member messaging and administration things here what's nice is followers are in a group so you can now share to your followers if you want to send special items or updates to just the people who are interested you can do that here and as well you can also force people to be followers by coming to the add members and basically inviting people in automatically so that gives you a little bit overview of following events works very similarly you saw we made an event earlier but if I have you know a draft event or upcoming event I can sign up people through the event itself and require registration and that will also put the users in a group and allow me to email them details about the event so very similar kind of mechanic is following in events in addition you may have noticed maybe you didn't that the list on the left has a few extra cards if you have hub premium they are a follow button that can be explicitly laid out on your site as well as a featured event as well as a list of events so just kind of exposing that and this button that attend button or clicking into an event and following can create an account if you've enabled that self sign up in your hub so let's we did that already we're gonna skip that so now if I wanted to bring others in to help by my team out we have this technique called teams for doing that every site comes with a core team and the core team is who can edit the site or page and they also get access to any other content shared to the core team group so if I come over here to teams I can go into my core team and these are all the people who are able to edit my site so you can come in and actually add anybody from both your organization or the community to edit this site so this is where you can bring in kind of community collaborators as soon as they do and they land on the site as long as they've accepted the invite they can click the pencil and then they'll be able to get into the edit modes so it gives you a little bit about core teams supporting teams is this idea of sharing specific content to specific users so maybe I want to share just a page to my police department I can make a supporting team for them and then pick any number of items to put in that supporting team so they have access to it but think behind this is this is that you have the general public whose anonymous who's you know maybe one way engaging with your site what you really want to find is the actively interested the people who are willing to receive updates or subscribe to something and actually you know lean in a little bit so that you from there you can find the actively engaged who will be able to you know really help out you know almost act as an extension of your work force and then you can of those people find the ones you trust to give special access to things teams basically lets us give the right access to the right level of people so we imagine that the actively interested will sign up at the minimum and maybe an attendant event we imagine that the actively engage will likely be a part of the supporting team's receiving special content and the trusted collaborators are those members who are part of your core team there in the middle and what's nice is your your sites and give that kind of focus that it's not this like generic high level access to lots of information you can focus them to that one specific action you want them to accomplish but now you can do it in different layers depending on trust and level of identity and level of engagement from the people you're trying to reach so yeah I think I've showed a couple of these areas as I walk through this but effectively you know if you think about my time here on this site getting more and more mature if I'm here anonymously I'm probably in that far right-hand camp whereas if I click follow and I sign in I've probably moved into that actively engaged maybe then the you wouldn't want to probably add a community member to your police department but if I wanted to make a supporting team for them I could come in here and to log out and log in and I can basically sign in and share just certain content to that community user so what I would do for that is go into the supporting teams feature in the upper right hand corner I can make a team you know basically sharing to Grimm and I can add my you know community version of myself basically to this team which is this guy right here so now he's on there and then within that I can go into my content and I can now share specific items to my gmail user and now he's that kind of engaged person that's leaning in a little bit more than before if I really trust myself which I think I do I can go into the core team and I can actually add myself as a core contributor which now allows my gmail user to make edits to this initiative and cite behind the scenes so that's kind of the full extent from end to end of you know how you can demo people up from you know no access all the way to full access it's also worth mentioning that the gallery in premium has a lot more options for starting points so make sure you give that a look it's back in the new site area so if I come over to you know overview and I click new I have this more broad gallery of ESRI available initiative templates that are ready to use in these topics and it's always growing so for monitoring just recommend that you do hook up Google Analytics to your sites this will give you an idea of which data sets are most popular which pages are most popular where you're getting your traffic from a lot of great stuff you can also set goals in there to make certain actions more important in an analytical sense so that you can see if you're improving the clicks on those actions or if it's going trending down and helps you make you know smart website adjustments integrating and automating there's a couple of option here these are just ideas but you can automate the invitation process to your community or using a survey one two three and a web hook and or some sort of editing process so that's pretty cool you can automate the removal of accounts from your community or that's unused for a period of time so if you want to periodically purge users out of the purple organization you can do that and you can sync content to if it's community created and you want it to be copied into your organization for safekeeping do something like that these folks did that first suggestion of they made a survey like an application form you click on you take the survey and then once approves you get an invite to the community or so that's a pretty cool way to do an advanced vetting process for community users if you're looking to automate the creation of sites or pages themselves we have hub pi which is fairly new it supports both enterprise sites and hub and you know will hopefully be really useful doing some fancy things if you're trying to create hundreds of hundreds of sites programmatically or move them between environments we were also working on ArcGIS hub web components for integrating into your content management system of choosing right now we have things like follow buttons and attend event buttons that help you create community users from a third-party website solution like WordPress but we're gonna be continuing to add to this repo so please check this out if you're looking to build a direct integration with some of this functionality finally let's land on some resources if you're looking for more inspiration than what Justin covered check out our gallery page on hub did our Jess comm if you are interested in following some more on the rails lessons go to learn that are just to come and check out our learn lessons and pads for our jazz hub and if you're looking for any of these resource links they are in your overview there at the bottom so be sure to click on them I definitely recommend if you're interested to give us user feedback join the user lab because we're always looking for participants there if you're interested in learning more about accessibility and how to make your HTML and your your custom headers for example accessible we've written up a great resource here for designing your sites for accessibility thank you so much for watching we look forward to hearing from you on unit

Channel: Esri Events

Views: 1,572

Rating: 4.5999999 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: 2OscukHpUeI

Length: 70min 20sec (4220 seconds)

Published: Mon Apr 06 2020