Once you've configured your site and added data, you can use the Site Editor to begin designing your site. The Site Editor is a full-page editor that provides you with a default site template that you can modify to fit your own site’s branding and data, or completely remove to start from scratch. Design the layout of your site by using drag-and-drop cards, setting an overall theme, and customizing the header and footer with markdown or custom HTML.
Access the Site Editor
Use the Site Editor to get started with designing your site or return at anytime to make changes.
- Sign in to the Sites administrative application.
- Click the Sites tab.
- Find the site you want to edit and choose Site Editor.
Configure site settings
Name your site and provide a description, and more. Site settings and capabilities can also be configured by clicking the Sites tab to access the Site Manager.
- Open the side panel and click Site Info.
- Provide a name in the Site Name field.
- Provide some background info on your site in the About Site field.
- Provide an optional favicon by pasting an image URL in the Custom Favicon field.
- Click to toggle on Google Analytics.
- Click to toggle on a Custom Basemap. You can choose which map you want from the dropdown menu.
- Click Capabilities at the top of the Customize panel to open the Capabilities menu. Within this menu, you can toggle on available capabilities. Learn more about capabilities in Manage site capabilities.
Header
Provide an image URL or use custom CSS to brand the menu bar at the top of your site.
- Open the side panel and click Header. Use logo and site title to enter a title and provide a URL for your logo.
- To name your site, choose Use logo and site title to and enter a title in the Site Title text field to place a title in the header of your site.
- To place an image in the header of your site, paste an image URL in the Logo URL field.
- If you want to brand the header of your site with custom HTML or CSS, choose Use custom HTML/CSS.
- Modify the CSS box in the side panel and click Apply Changes to see your code in effect.
Caution:
Header HTML does not support embedded JavaScript. Script tags will be ignored.
Note:
The area for My Data and Sign In cannot be edited or removed in order to maintain functionality of the site.
Theme
Create a theme for your site by choosing colors for your site's header, text, and buttons.
- To select a color for any of the following options, enter a color code or pick a color from the color picker next to the color code field.
- The Header Background Color applies color to the header of your site.
- The Header Text Color applies color of all text in the header.
- The Body Background Color applies color to your site's rows.
- The Body Text Color applies to text across your site.
- The Body Link Color applies color to any links provided on your site.
Tip:
Text color can also be changed by row.
- The Button Background Color applies color to buttons provided on your site.
- The Button Text Color applies to the text on any buttons provided on your site.
- Once you've set colors, click Apply Changes.
- You can also apply fonts to text in the header and at the body of your site.
- To choose a font for your site's body, click the Base Font settings icon.
- To change the font for the header of your site, click the Header Font setting icon.
Note:
To start over or return to default colors, choose Reset to Defaults at the bottom of the Theme menu.
Layout and cards
The basic layout of a site or page is organized by rows and cards. A card must be placed in a row, and there is no limit to the number of cards that can be placed in a row. To edit any card, click the settings button. To delete any card, click the delete button. The following cards can be used to build your site: row, banner, image, web map, text, category, contact information, gallery, iframe, event details, event list view, video, social media, summary statistic, and chart.
Row card
Use rows to construct the overall layout of your site. Drag cards from the Site Editor to fill rows with additional cards, such as text, images, and media.
- Drag a row from the Site Editor onto the layout.
Markers appear on the page to guide you.
- Hover over the row, and three buttons appear on the right side: arrows for moving the row around the page, a settings button for editing, and a delete button for deleting the row.
- Click the settings button to switch to edit mode.
- Choose the Layout of your row by choosing Box or Wide. Wide displays your content across the entirety of the page, where as Box displays content at a fixed width within the row.
- Set the text color for this specific row.
- Set either a background color (transparent is default) or a background image.
- Optionally add an image by clicking Image Source and choosing to either upload an image file or provide an image URL. Both options support JPG, JPEG, and PNG.
- To upload an image file, choose Upload Image and drag the file onto the box in the Site Editor, or click Browse for Image to locate and add your file. Maximum file size is 3 MB.
- Or, provide an image URL by pasting a supported image link in the URL field.
- If using an image file, you can customize it by clicking the crop button and dragging a handle to resize the crop frame. The crop frame can be repositioned by dragging on the dotted line. You can also zoom by adjusting the slider below the image and reposition the image by clicking within the crop frame.
- If you add background color and an image, you can also adjust Image Transparency in the Appearance menu by entering a percentage or using the slider.
- Enable Fixed Background to give a parallax effect so that content scrolls at a different pace than the background image.
- Optionally set a point for Image Focal Point to ensure the focus of your image as it adjusts for different screen sizes.
Banner card
Use banners for adding headers and search bars within a site.
- Drag a Banner card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Enter text for Headline and Subheadline.
- From the Search menu, click Show Searchbar to add an optional search bar to the banner. Optionally click Add Ability to Search by Location to add a secondary search option for users to filter results by location.
- Optionally add placeholder text to appear in the search bars.
- From the Options menu, enter a value for Minimum Height to set the height of your banner. The value must be greater than zero.
- From the Background Image menu, optionally choose to upload an image file or provide an image URL. Both options support JPG, JPEG, and PNG.
- To upload an image file, choose Upload Image and drag the file onto the box in the Site Editor, or click Browse for Image to locate and add your file. Maximum file size is 3 MB.
- Or, provide an image URL by pasting a supported image link in the URL field.
- If using an image file, you can customize it by clicking the crop button and dragging a handle to resize the crop frame. The crop frame can be repositioned by dragging on the dotted line. You can also adjust zoom below the image using the slider, and reposition the image by clicking within the crop frame.
- For both image uploads and image URLs, you can optionally select a point for Image Focal Point to ensure an area of focus on your image regardless of how it appears on different screen sizes.
Search card
Add a search bar to help people quickly find content shared to your site.
- Drag a Search card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Provide placeholder text in the Search Placeholder Text field. For example, you could use "Search by Keyword" or "Find Data".
- Click the Add ability to Search by Location checkbox to add an additional search bar for querying a location based search. You can also provide placeholder text in the Location Placeholder Textfield.
Image card
Add images by uploading them from file or by providing an image URL. Images that are shared internally will only be viewable by those who are signed in and belong to the team or organization.
- Drag an Image card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Choose an image source. You can either upload an image file or provide an image URL. Both options support JPG, JPEG, and PNG.
- To upload an image file, choose Upload Image and drag the file onto the box in the Site Editor, or click Browse for Image to locate and add your file. Maximum file size is 3 MB.
- Or, provide an image URL by choosing Image URL and pasting a supported image link in the URL field.
- If using an image file, you can customize uploaded images by clicking the crop button and dragging a handle to resize the crop frame. The crop frame can be repositioned by clicking and dragging on the dotted line. You can also zoom by adjusting the slider below the image and repositioning the image further by clicking within the crop frame.
- From the Options menu, provide image alt text to help non-sighted users and improve the accessibility of your site.
- Provide an image hyperlink and choose for the link to open in either the same tab or a new tab.
- Provide text for Image Caption and choose text alignment.
- Optionally click Scale Image to Fill to set a focal point for the image. The focal point will ensure that your image remains focused where you want it as the image resizes for different screens.
Web maps
Displays web maps on your site. Web maps can be shared privately. Only those who belong to the team or organization will be able to access them when signed in.
- Drag aWeb Map card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click Find a web map.
- Find a web map by searching My Maps, My Organization's Maps, or All Maps.
- To display a title for your map, click the toggle for Title.
- Set a Height (in pixels) for your map.
Text card
Format text, add lists, and insert tables. You can also use Custom HTML.
- Drag a Text card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Add text.
- Select text to format. Format options include style (add headers, code snippets, and quotes), bold, italics, and links.
- To adjust text alignment, click the paragraph options and choose an alignment. You can also indent or outdent a line of text by choosing the paragraph option and selecting either indent or outdent.
Note:
Text color can be modified in row card settings.
Add a bulleted or numbered list
- Add text or select existing text.
- Choose the unordered list to create a bulleted list.
- Choose the ordered list to add a numbered list.
Insert a table
- Click the table option.
- Select the number of cells you want per row and column.
- Once you've selected the size of your table, click to insert the table. Add or remove rows or columns by clicking inside a cell and choosing the insert or delete rows or columns buttons. Click the delete button to remove the table entirely.
Note:
To add a header to your table, click the top row of your table, then click the Toggle table header button. Headers make it easier for those who use assistive technologies to navigate a table's content.
Insert buttons and cards
- Click the Insert button.
- Choose from the following options:
- Button- add a call to action by providing links to more information.
- Wide Card- insert a single card to display content, link to more information, and display a picture.
- Cards- insert multiple cards.
Note:
Pictures can be edited by providing a link to a hosted image inside the card's code view.
Add HTML
You can use HTML to customize the appearance of your text.
- Drag a Text card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click the Code View option.
Caution:
For security purposes, text cards do not support embedded JavaScript. Script tags will be ignored.
The following HTML elements are allowed:'a', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
'ul', 'center', 'style', 'div', 'span'
The following attributes for those elements are allowed:
All supported HTML elements allow : ['class', 'style'],
'a' : ['href', 'title', 'target', 'data-toggle', 'data-target', 'name'],
'blockquote': ['cite'],
'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss'],
'col' : ['span', 'width'],
'colgroup' : ['span', 'width'],
'div' : ['data-show', 'data-target', 'data-toggle']
'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ],
'ol' : ['start', 'type'],
'q' : ['cite'],
'table' : ['summary', 'width', 'class'],
'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'],
'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
'ul' : ['type']Category card
Use categories to group datasets on your site so that people can quickly browse available content.
- Drag a Category card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Edit the link text for your category.
- Select either Use Tag Query or
Use Group.
This will determine which datasets are returned in the search results when users click this category.
- Tag—Enter a tag query. .All datasets that have this matching tag on their respective enterprise portal item will be returned in the search results.
- Group—Select a group. All datasets in this group will be returned in the search results.
- Choose an icon from the
library:
- Select Pick an Icon.
- Choose an icon from the modal
and click Select.
The icon appears in the side panel.
- Click the gray box to the right of the icon to choose the icon’s color.
- Use your own
icon:
- Provide a URL for your icon.
- Provide alt text for your icon to help non-sighted users and improve your site’s accessibility.
- Click Back to Site Editor to return to the main side panel.
Tip:
Custom icons should be saved as an .svg or transparent .png file. Icons will be scaled to fit 120x120 pixels.
Contact information card
Provide contact information to send an email to the data owner.
- Drag a Contact Info card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Provide the contact email
address and email subject line.
When users click the email on your home page, their email editor opens automatically.
- Click Back to Site Editor to return to the main side panel.
Gallery card
Use the gallery card to showcase apps, dashboards, datasets, sites, pages, webmaps, and documents. The gallery card retrieves these items from your organization's ArcGIS Online groups automatically. As you add content to your organization or a particular group, new application tiles appear on your site without having to edit the layout.
- Drag a Gallery card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Choose what appears on your cards by clicking the Display drop-down menu and opting to display content by type or by manually selecting individual items.
- To show content based on type, click Dynamic, then choose either Apps, Dashboards, Datasets, Sites, Pages, Web Maps, or Documents. Additional settings require you to choose the number of Cards Shown and from which group or tag they will be queried.
Tip:
Apps include the following items: applications, forms (Survey123), and web mapping applications. Supported Document types include PDF, Microsoft Excel, Microsoft PowerPoint, iWork Keynote, iWork Pages, iWork Documents, and Visio Documents.
- To show a mix of content, click Manual, then select content individually by clicking Add Content and choosing any combination of apps, datasets, sites, and pages that belong to your organization.
Tip:
If you opted for manual display, you can reorder the way in which your cards appear in the layout by adjusting the list of cards in the Site Editor. Click on a card's name to drag and drop it to a new position in the list.
- To show content based on type, click Dynamic, then choose either Apps, Dashboards, Datasets, Sites, Pages, Web Maps, or Documents. Additional settings require you to choose the number of Cards Shown and from which group or tag they will be queried.
- From the Style drop-down menu, choose the look of your gallery cards with the following options:
- Image- choose either icons or thumbnails.
ArcGIS OnlineSite EditorSitesArcGIS OnlineMy Content Edit ThumbnailArcGIS Online Item details ContentOverviewEdit Thumbnail Item details - Corners- choose either square or rounded corners.
- Button Text- optionally rename the Explore button by entering a new name in the text box.
- Image- choose either icons or thumbnails.
Iframe card
Embed iframes and external resources.
Caution:
Do not embed iframe code from another website. Only paste in the URL that you want to embed.
- Drag an iframe card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Provide your iframe URL and iframe height.
- Add a title to your iframe.
- Enable scrolling by turning on Auto.
- Click Apply.
Note:
Iframe URLs using HTTP will not appear in the Site Editor, which uses HTTPS. Save and view your site to observe your iframe.
Video card
Add video cards to embed YouTube, Vimeo, or Facebook videos.
- Drag a Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Paste a video URL from Facebook, Vimeo, or YouTube in the Video URL field.
- Depending on the video source, additional options appear that allow you to configure video display:
- For Facebook videos, choose Show Post Text to display number of likes, comments, shares, and other related text. Choose Show Captions Always to display video captions.
- For Vimeo videos, choose Show Video Title, Show Video Owner, Show Video Owner Thumbnail, and Loop Video Playback.
- For YouTube videos, choose to Show YouTube Branding and Loop Video Playback.
- Click the copy button next to Video URL to save the link to the clipboard so that you can reuse it elsewhere in the app.
Social media card
Share social media posts and timelines directly on your sites using URLs.
Facebook post
Display a single post to highlight something specific.
- Drag a Social Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- In the Social Media Post URL field, paste a URL for any publicly shared Facebook post. To copy the correct URL, click the post's timestamp (the date or time in the post's top left corner), then copy the new URL in the browser before returning to edit your site.
- Optionally, click the toggle for Show Post Text to display text associated with the post.
Facebook timeline
Display a Facebook page Timeline, Events, and Messages for greater exploration.
- Drag a Social Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- In the Social Media Post URL field, paste a URL for any publicly shared Facebook page.
- Optionally, click to toggle on any combination of the following options:
- Facebook Page Tabs displays a Timeline tab below the page's header. Click this option if you want to share your timeline alongside Events and/or Messages.
- Events will display a list view of just the page's events views.
- Messages enable people to type and send a message to the Facebook page's admin using Facebook Messenger.
- Use Large Header increases the size of the page's header and adds a Send Message button linking people to Facebook Messenger.
- Show Cover Photo to display the page's cover photo.
Twitter post
Display a single Twitter post to highlight a specific Tweet.
- Drag a Social Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- In the Social Media Post URL field, paste a URL for any publicly shared Twitter post. To get the link for a single Tweet, click the more icon at the top right of the post, then choose Copy Link to Tweet.
- Optionally, click to toggle on any combination of the following options in the Options menu:
- Show Dark Theme inverts the color of the display.
- Select Tweet Width to choose the size of your post's display. Options include Small, Medium, and Large.
- Select Tweet Position to choose Left, Center, or Right alignment.
Twitter timeline
Display a scrollable Twitter timeline.
- Drag a Social Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- In the Social Media Post URL field, paste a URL for any publicly shared Twitter timeline.
- Optionally, click to toggle on any combination of the following options in the Options menu:
- Select Collection Height by choosing Default to stay with the current display or choose Expanded to show more of your timeline.
- Tweet Limit sets the number of tweets displayed on the timeline.
- Show Dark Theme inverts the color of the display.
- Show Header to display a header. Similarly, choose Show Footer to display a footer.
- Show Border to display a border around the timeline.
- Show Background to remove the background.
Twitter collection
Display a twitter collection on your site. For information on how to create a Twitter collection, visit the Twitter Developer documentation on how to Curate a collection of Tweets.
- Drag a Social Media card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- In the Social Media Post URL field, paste a URL for any publicly shared Twitter collection.
- Optionally, click to toggle on any combination of the following options in the Options menu:
- Tweet Limit enables you to set a limit for the number of tweets shown in the collection.
- Expanded Height enables you to show more of the collection at once.
- Show Dark Theme changes the color of text to white and applies a dark gray background.
- Show Header displays the title of the collection. Similarly, choose Show Footer to display a footer which provides links to Embed or View on Twitter.
- Show Border displays a border around the card.
- Show Background applies a white background to the card. If Show Dark Theme is also selected, a dark gray background will be applied.
Summary statistic card
Use summary statistics to provide data at a glance for key performance indicators and more. Summary stats are generated from a dataset query and are automatically updated as the dataset is updated. Only those who have access will be able to summary statistics upon sign in that have been generated using internally shared data.
- Drag a Summary Statistic card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click (+) Add Data, which opens an item picker to find the data service of your choice. When editing the site, the source link below your statistic will link to the item details page for the dataset's preview page.
- For Statistic Field, choose a field from the selected service. This field will be used in subsequent steps.
- For
Statistic Type, choose the type of operation to perform on the selected field.
- For text and date fields, choose between count, minimum, and maximum.
- For number fields, choose between count, sum, minimum, maximum, average standard deviation, and variance.
- Optionally add a filter to your statistic:
- Select an attribute to use for your filter.
- Select Add.
- Select the new attribute box to show the filter input. The input box will vary depending on the field type.
- Enter your desired filter.
- Click outside the filter box or press Enter on your keyboard.
- Enter a title in the Title text box.
- Optionally enter text for Trailing Text to provide detail for the statistic, and change the Accent Color setting for the statistic itself.
Chart card
Create simple charts directly from your datasets, or enter your own chart JSON to create a custom chart. Charts that are created with privately shared data will only be viewable to those who have access to either your team or organization when signed in.
Bar chart
Bar charts are created from queries to a selected dataset and are automatically updated as your dataset is updated.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Bar Chart will be selected by default.
- Click (+) Add Data.
- Select an item from your available data services.
- For Choose Category Attribute, choose the primary charting item from your data.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Optionally Choose Value Attribute to pick a numeric field to serve as a value metric for your category attribute. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation by using the drop down to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting count the value attribute is de-selected (because there is no need for an additional field to count the category attribute).
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option enables you to choose how your attribute data is displayed. Select an attribute, then click the sort icon next to the attribute to display data in ascending or descending order.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code or click the color picker to choose a color.
- Provide text for the Category Label and the Value Label.
Pie chart
Pie charts are created from queries to a selected dataset and are automatically updated as your dataset is updated.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the pie chart by clicking the circular pie chart button.
- Click (+) Add Data.
- Select an item from your available data services.
- For Choose Category Attribute, choose the primary charting item from your data.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Optionally, from Choose Value Attribute, choose a numeric field to serve as a value metric for your category attribute. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation setting by clicking the drop-down arrow to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting Count, the value attribute is deselected (because there is no need for an additional field to count the category attribute).
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option enables you to choose how your attribute data is displayed. Select an attribute, then click the sort icon next to the attribute to display data in ascending or descending order.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set a Category Label text for the label of each pie wedge in the tooltip and the Value Label text for the label of the metric in the tooltip.
Line chart
Line charts are created from queries to a selected dataset and are automatically updated as your dataset is updated.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the line chart by clicking the line chart button.
- Click (+) Add Data.
- Select an item from your available data services.
- For Choose Category Attribute, choose the primary charting item from your data.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Optionally, from Choose Value Attribute, choose a numeric field to serve as a value metric for your category attribute. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation setting by clicking the drop-down arrow to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting Count, the value attribute is deselected (because there is no need for an additional field to count the category attribute).
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option enables you to choose how your attribute data is displayed. Select an attribute, then click the sort icon next to the attribute to display data in ascending or descending order.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code or click the color picker to choose a color.
- Set a Category Label text for the label of each point in the tooltip and the Value Label text for the label of the metric in the tooltip
Scatter plot
Scatter plots are created from queries to a selected dataset and are automatically updated as your dataset is updated.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the line chart by clicking the scatter plot button.
- Click (+) Add Data.
- Select an item from your available data services.
- For Choose X Axis Attribute, choose the primary charting item from your data.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Select an attribute for the Choose Y Axis Attribute field. hoose a numeric field to serve as a value metric for your category attribute.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option enables you to choose how your attribute data is displayed. Select an attribute, then click the sort icon next to the attribute to display data in ascending or descending order.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code or click the color picker to choose a color.
- Set an X Axis Label and aY Axis Label to display on your chart.
JSON chart
Custom charts are created from JSON using a specific chart specification.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the JSON tile.
- Enter your JSON in the JSON Chart Specification field.
- Optionally, in the Options section, you can enable or disable and customize the Chart Title and Height (in pixels) settings.
JSON specification
Entering custom JSON allows you to create custom charts that leverage the Cedar library. A specification is made up of the following components:
Datasets
The datasets array specifies an ArcGIS feature service URL and query parameters. Refer to the REST API documentation to learn more about query parameters.
{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}Series
The series array allows you to specify the mappings between fields in the service response and the visual aspects of the chart (x,y axes, color and size for scatterplot charts, and radius for pie charts).
{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }Overrides
The override property allows you to specify visual overrides, such as color or positioning, for the entire chart.
"overrides": {
"legend": {
"enabled": true
},
"backgroundColor": "#E6E6FA",
"backgroundAlpha": 1
}
}Specification
The specification property allows you to input an entire Cedar specification for a purely custom chart. View examples for existing chart specifications.
Examples
Bar chart:{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
]
}{
"type": "bar-horizontal",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
],
"overrides": {
"categoryAxis": {
"labelRotation": -45
}
}
}Note: Each
series will match to a group. {
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}
{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}Timeline chart:
Note: Category must be a datetime field.
{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}Footer
The Site Editor default does not have a footer. You must create a custom footer to have a persistent footer across all pages of your site.
- From the Footer
section, select
Custom.
A default footer appears on the page and a CSS box appears in the side panel.
- Click the settings button at the lower right of the footer to edit the HTML.
- Click the settings button again to view your changes.
- Modify the CSS box in the side panel and click Apply Changes to see the effects on your HTML.
Tip:
Footer HTML does not support embedded JavaScript. Script tags will be ignored.