Select to view content in your preferred language

Hub site app usage and update flip cards

1511
10
Jump to solution
07-20-2023 12:33 PM
Ed_
by MVP Regular Contributor
MVP Regular Contributor

I came across this Hub site.

  1. How can I create the flip card widget(s) shown in the screenshot?
  2. How can I link the flip cards with GeoHub and AGOL to get these numbers?

SaadullahBaloch_0-1689881579530.png

 

Question | Analyze | Visualize
Tags (2)
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Regular Contributor

Yes, the only way to have a dynamically updating value is to connect the data as a feature layer or csv to the Hub statistic card. If you're asking for a way to manually enter values, that will be part of the Q3 update.

View solution in original post

10 Replies
Ed_
by MVP Regular Contributor
MVP Regular Contributor

@KlaraSchmitt, can you please help? Thank you!

Question | Analyze | Visualize
0 Kudos
KlaraSchmitt
Esri Regular Contributor

Those are not flip cards. Those are non-dynamic KPI cards from this post: https://community.esri.com/t5/arcgis-hub-documents/tips-create-custom-cards-with-html/ta-p/920496 

Flip cards are actually rather challenging to get right from a keyboard accessibility and focus management standpoint (we've tried), so it's unlikely you'd seen those in our editor.

As for having a dynamically backed statistic card, we currently support this today with the statistic card in the layout editor. We are, however, working on some improvements to that card, which will give it a little appearance boost, amongst other requested features. You can expect to see these changes during Q3 this year.

Ed_
by MVP Regular Contributor
MVP Regular Contributor

Hi Klara,

Thank you for the quick response, I always appreciate that. So with the statistic card, how can I can connect it to my organization's GeoHub and AGOL to retrieve similar numbers as shown in the screenshot?

Question | Analyze | Visualize
0 Kudos
KlaraSchmitt
Esri Regular Contributor

Assuming you have the data in your catalog, you should be able to follow these steps https://doc.arcgis.com/en/hub/sites/insert-charts-tables-and-key-metrics.htm#ESRI_SECTION1_E1D799DC4... to connect your data to the statistics summary card.

Ed_
by MVP Regular Contributor
MVP Regular Contributor

Oh so there's no direct way to connect the card to AGOL to get such numbers? I will first have to get this info from AGOL into an Excel document and upload it to AGOL and then feed this as an input dataset to the card? 

Question | Analyze | Visualize
0 Kudos
KlaraSchmitt
Esri Regular Contributor

Yes, the only way to have a dynamically updating value is to connect the data as a feature layer or csv to the Hub statistic card. If you're asking for a way to manually enter values, that will be part of the Q3 update.

Ed_
by MVP Regular Contributor
MVP Regular Contributor

Awesome, thanks for the help and looking forward to the update.

Cheers!

Question | Analyze | Visualize
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

@KlaraSchmitt, on a side note, I have noticed that Hub relies considerably on HTML/CSS/Bootstrap and/or JS. Does ESRI provide instructor lead courses to provide basic hands on training to these languages in order to have a good starting point? 

Or are there any blog/tutorial series in this regard/ 

Question | Analyze | Visualize
0 Kudos
KlaraSchmitt
Esri Regular Contributor

We only rely on it for advanced DIY functionality. You can build a Hub site without code. This is an improvement from when I first started and you had to use markdown to build your whole site layout. Many of the features that used to require code in the early days of our site builder are now represented by actual layout cards and can be filled out through form fields.

People do make some really nice sites using HTML & CSS, but that could be done with or without Hub. It is more related to their knowledge of HTML & CSS. I don't know off the top of my head if ESRI offers that type of training, but there are a lot of free resources on the web for learning the basics of HTML & CSS. I like https://css-tricks.com/guides/ 

If you look for the csstricks tag on some of my posts, I've published several posts with code snippets for some types of stylized cards and if you want basic components like buttons, we're starting to transition to the Calcite framework. (My one caveat about using these is that they are something called web components, which won't mean much to you at the moment. But in a nutshell, web components are easy to get up-and-running because they have a bunch of built in configurations, but they are very hard to style visually because they don't support CSS overwrites.)

While we do use Bootstrap for our grid, it isn't really necessary to know, because the drag and drop editor can be used with grids and cards to automatically handle reflow. If you want a more thorough explanation of how the grid works, I give an overview of it in this post: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically... with a link to the Bootstrap documentation.

You will not be able to do javascript within our application, because while our app is built using lot of javascript, embedding third party javascript is a security risk, so we don't allow it.