Once you've configured your site and added data, you can access your Site Editor to begin designing your site. The Site Editor is a full-page editor that provides you with a 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.
Site Info
Name your site and provide a description.
- 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.
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
- 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, dataset, 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.
- Click Back to Site Editor to return to the main side panel.
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.
- Click Back to Site Editor to return to the main side panel.
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 belonging to the team 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.
- Click Back to Site Editor to return to the main side panel.
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
Add text (markdown and HTML) to your layout.
- Drag a Text card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Enter markdown or HTML text in the text card.
- Click the settings button to view the text.
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 identify accessible data.
- 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.
Dataset card
Add featured datasets or other applications to your home page.
- Drag a Dataset card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click Find a
Dataset.
All the datasets you have added to your site will appear.
- Search for a dataset or select
one from the list.
The dataset appears in the preview pane.
- Click Select.
The dataset’s image, title, and description populate the settings in the side panel. These can be edited for your home page, and it will not affect the dataset details.
- 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.
ContentOverviewEdit Thumbnail - Corners- choose either square or rounded corners.
- Drop Shadow- choose from none, low, medium, or heavy.
- 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 Messagebutton 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 twitter collections as a grid or as a list. Collections are denoted in the header of For information on creating your own Twitter collections, 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:
- Select Collection Type is a drop down menu that you can select to choose the display of your collection as either a Grid or List.
- 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.
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.
Use markdown
Use markdown in the text cards to customize text on your site.
Markdown Quick Sheet
Attribute | Syntax |
Header | # Text here for a header at level 1 (largest) ## Text here for a header at level 2 ###### Text here for a header at level 6 (smallest) |
Italics | This is *italic text* or _italic text_ |
Bold | This text is **bold** |
Combining Italics and Bold | *Combine italics **and** bold* |
Link with address shown | http://www.esri.com Note:Do not forget the protocol (HTTP or HTTPS) in front of your URLs |
Link without address shown | [your hyperlink text] (http://www.esri.com) Note:Do not forget the protocol (HTTP or HTTPS) in front of your URLs |
Bullets | * First thing in bullet list * Second thing in bullet list |
Ordered List | 1. First thing in a numbered list 2. Second thing in a numbered list |
Insert Images | <img src="image source URL including HTTP or HTTPS"> Note:If you have images in your Enterprise portal you can also take advantage of relative URLs like "../images/my-amazing-image" |
Insert Image with Hyperlink | <a href="link URL including HTTP or HTTPS"><img src="image source URL including HTTP or HTTPS"></a> |