Decision Support System landing page

This document describes how to create, configure, and update Decision Support System landing page. This guide will walk you through creating your first page. We'll go over getting a web page designer, adding rows, adding text, adding images, and making text with HTML.

A landing page is the main web page a visitor navigating to a DSS platform when the application starts up. The DSS landing page is developed using ArcGIS Enterprise Sites. Web pages created with ArcGIS Enterprise Sites are built to be easily navigated by non-GIS users. Sites features a built-in web page designer that integrates a drag-and-drop experience with HTML markup, giving you absolute control over the design of the web pages you create. You can also add non-GIS content, such as videos and documents, to your Site to create a central place for material relevant to your users to be hosted and accessed.

Create a site

A site is a website that can be used to share information with others. Follow these steps to create a site.

Sign in to https://unosat-geodee.cern.ch/portal and click the Sites app in the app switcher next to your user profile.
On the Overview page, click New on the Sites card.
Provide a name for your site.
Click Create Site.

Add your first card using the row card

Row cards are the building blocks of your site. Whenever you want to add a card, such as a text card or image card, you must have a row card positioned where you want to add the content. Multiple cards can fit in a row card.

Click Layout on the side panel and choose a row card.
Drag the row card from the panel onto the layout and position the row card where you want it. 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 setting of your row: Box or Wide. Wide displays your content across the entirety of the page, whereas 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. The 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.

Add and format text

Text can be added to your site anywhere there is a row card. Add text anywhere to your site by dropping this card onto a row card. You can also use this card to add buttons, lists, tables, and custom code to your site.

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 the text you want to format. Format options include style (add headers, code snippets, and quotes), bold, italics, and links.
To change the size of text, click the style button and choose a header size.
To adjust text alignment, click the paragraph options and choose an alignment. You can also indent or negative indent a line of text by choosing the paragraph option and selecting either option.
Click Save.

Tip:
If you make a mistake, press Command+Z or Ctrl + Z on your keyboard to revert your changes.

Change text color

Change text color by following these steps.

Hover over the row card on which your text card is nested and click the settings button for the row card.
Change the color by entering a hex color code, or by choosing a color from the color picker.
Click Save.

Tip:
Hex codes are useful for ensuring consistent branding across your organization's resources. If you're unsure of the specifics related to your organization's branding, see if it provides any documentation or brand guidelines.

Change fonts

You can change the font for text headings and base text using Google Fonts. Base text includes all text on your site’s layout. This font is also applied to any pages that have been added to your site, item details pages accessed through the site’s search, and any events views.

Add a bulleted or numbered list

Create a list by following these steps.

Add text or select existing text.
Choose the unordered list to create a bulleted list.
Choose the ordered list to add a numbered list.
Click Save.

Add a stand-alone image

Add images by uploading them from a file or by providing a URL to a hosted image. Images that are shared internally will only be viewable by those who are signed in and belong to the core 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. The 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 Save.

Choose an image layout on a row card

Every row card has two layout options that enable you to choose how your image is displayed.

After adding an image to a row card, you can choose to have a wide or fixed layout for the image and any content displayed on the card.
- Choose Wide if you want your image to span the width of your site.
- Choose Fixed if you want your image to stay fixed.
Set Image Focal Point to ensure that your image remains focused where you want it as the image resizes for different screens.
Click Save.

Configure text with HTML

If you'd like to use HTML to customize your text, you can use the following HTML elements:

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.
Enter your code.
Click Save.

Caution:
For security purposes, text cards do not support embedded JavaScript. Script tags will be ignored.

The following HTML elements are allowed:

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
  'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
'code', 'col',
'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
  'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
  'footer', 'frameset',
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
  'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
  'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
  'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
  'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

The following attributes for those elements are allowed:

All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
    'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
    'button' : ['name', 'value', 'data-toggle', 'data-target',
    'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
    'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
    'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
    'width'],
 'ol' : ['align', 'start', 'type'],
    'p' : ['style'},
 'q' : ['cite'],
    'source' : ['media', 'src', 'type'], 
    'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
    'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
    'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
    'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']

For more information, see