Main site | All Documents

The Editor Admin Mode

In a mature site, the Editor Admin Mode is the second most used App Mode after the User App Mode.

The Editor Admin Mode allows an administrative user to change the labels on the site, configure navigation, and adjust data security.

While in Editor Admin Mode, the following tasks can be accomplished.

1) Inline Editing of Labels

2) Adding new content pages

3) Editing existing content pages

4) Managing existing content pages

5) Reconfiguration of page segments (Headers, Navigation bars, footers)

6) Section Serialization for Mobile Devices

7) Editing of standard HTML page metadata

8) Navigation menu configuration – labels, icons, ordering

9) Data security configuration

When the application is put in Editor Mode, you will notice changes in some of the header segments including the Status bar and the Control bar.

Figure 72: the Status bar and the Control bar in User Mode

Figure 73: the Status bar and the Control bar in Editor Mode

In Editor Mode, the Status bar and the Control bar will acquire the following new buttons

1) Add new content page button

2) Configure navigation and security button

3) Revert to User Mode button

4) Edit Page Properties button

Inline Editing of Labels

In Editor Mode the administrative user can change section titles and form field labels.

As an example of Editor Mode usage, navigate to:

/Admin/Customer/Create

Figure 74: A Create Form

Using the “Change App mode” dropdown at the top right of the page, select “Editor Mode”

Figure 75: Switching to Editor Mode

Figure 76: A Create Form in Editor Mode

Changing a label

Using the Figure above as a reference, text in the highlighted segments can be changed. The changed text will be saved once the textbox loses focus.

The red or orange border will change color to blue to indicate that your change has been committed.

When a new content page is added to an EndApps website, the page will be created in the “Content Lab” area of the site. The page will remain in the Content Lab area until it is published, making it generally available to authorized users. For more information, see “Managing Content Pages”

To add a new content page while in Editor Mode, click the “Add new content page” button situated at the top right of the page.

Clicking the “Add new content page” button opens the “Create new page” dialog. See Figure below.

Figure 77: Create new page screen

The Create new page screen

The Create new page screen contains a two-step wizard:

• Step one: Enter page location

• Step two: Choose page layout

Once you have completed step two, your new content page will be loaded in Edit View.

Enter page location

Ideally, new custom pages should be located within an area of the website.

Here are some examples:

'sales/Q1'
'sales/Q1/shoes'
'sales/Q1/shoes/month-Jan'
'Q1_Sales' (not recommended)

The path you enter is assumed to start from the root of the site, regardless of your current location within the site.

To ensure a valid URL for the site users, only word characters, numbers and the following characters are allowed:

- (dash)

/ (forward slash)

_ (underscore)

Once you have entered a valid path, click the “Next” button.

Choose page layout

In the layout choice step of the wizard, select the desired layout of the new page.

Figure 78: Create a new page screen: Layout choice

Editing existing content pages

If a user is located on a content page and then switch from User Mode to Editor Mode, or while in Editor Mode the user uses the Create New Page Wizard, the existing content page or the newly created content page will be loaded in Edit View.

A Content Page is only in Edit View while in Editor Mode.

Figure 79: Content Page in Edit View

A content page can contain multiple panels depending on the layout selected. The content and settings for each panel are saved separately.

There are four primary elements of a content panel:

1) Panel save button

2) Title

3) Keywords

4) Content body

5) Options

6) “Load existing content” dropdown

Panel Save Button

After a user has populated the content panel fields, the user may click the Panel Save button to save a panel’s information.

When you click the Panel save button, a confirmation message appears at the top right of the screen, confirming that your settings have been saved.

Figure 80: Confirmation message

The confirmation message goes away after a couple of seconds.

Title

The text entered in the Title textbox becomes the header of the panel.

Keywords

The keywords entered in the Keywords textbox will be added to the page metadata, and will make it easier for a site user, or a search engine to find the content in the panel.

Content body

The content body is the content that will be displayed when the page is not in Edit View.

Options

The settings in the options segment of the content panel primarily determine how the content will be displayed.

These settings are:

1) Width: The screen is divided into 12 units. Set a width value ranging from 0 to 12

2) Is Framed: Determines if the content will be displayed flat on the screen on or slightly embossed

3) Has Border: Determines if the content will be displayed with a border around it

4) Has Header: Determines if the header of the content panel will be displayed

5) Enforce Row Start: Determines if the content will allow content to its left

6) Enforce Row End: Determines if the content will allow content to its right

7) Is Format Independent: Determines if the content requires additional content formatting information

8) Name: The name of the content

9) Priority: Sets a single content panel as the priority panel for the page. This setting determines which panel will be displayed first in mobile devices IF the content page is serialized.

10) Specialization: See the Content Specialization section below

11) Content Size: For certain content type, this setting will change the font size

Content Specialization

In an EndApps-based website, the Content Panel allows the administrative user to add and edit HTML-based content.

To make the task of building out a site’s content much easier, the Content Panel comes with a content specialization dropdown that lists readily available content display types. When a content specialization is selected the Edit View and the Display View of the content panel maybe reformatted to account for the select content specialization.

The Following are the Content Specializations.

YouTube Gallery

The YouTube gallery content specialization allows a user to create a gallery of YouTube videos just by pasting-in video links from YouTube or Vimeo. Each new link is expected to be on a new line.

Figure : YouTube Gallery in Edit View

Figure : YouTube Gallery in Display Mode

Highlight Links

A highlight link is a specially formatted link to content or external web pages that are usually used to link to related content.

Figure : Highlight links in Edit View

Figure : Highlight links in Display View

2, 3, 4 or 6 Highlight links may be displayed in a single content panel. This is because the screen is made up of 12 units.

Periodics

Use the Periodics Content Specialization to organize and display content that is published on a daily, weekly or monthly basis.

There are three built-in Periodics types

1) Year-Month-Day: For daily content

2) Year-Month-Week: For weekly content

3) Year-Week: For weekly content

4) Year-Month: For monthly content

Figure : A Periodics Content header showing related content

The automatically groups related Periodics content. For the system to successfully group related content, the following must be true:

1) The related content must have the same root path. In the example above, all the content page share the root path “marketplace/commodity-prices”

2) While assigning the content path, the path chosen must conform to the periodic type to be selected. So the path chosen for the example above is “/marketplace/commodity-prices/2013/December/week-1”

Rss

The RSS Content Specialization enables the display of RSS feeds as links on the site.

In Edit View, paste-in the link to the RSS feed.

Get from server

The “Get from Server” Content Specialization will render an arbitrary segment of the site into the selected content panel. This future must be used with caution because not all segments of the site will render correctly in an arbitrary Content Panel.

FAQs

The FAQs content specialization enables the display of FAQs on the site. An FAQ (Frequently Asked Questions) section is composed of a collection of questions-with-answers pairs. A question is posed in the initial line, and the answer is provided in the subsequent line. Each question-answer pair is separated by an empty line.

Features

The FAQs content specialization enables the display of a list of features on the site. A Features section is composed of a collection of header-and-description pairs. A header is entered in the initial line, and the description is provided in the subsequent line. Each header-and-description pair is separated by an empty line.

Figure : Features content in Editor Mode

Figure : Features content in User Mode

Numbered Features

This is the same as the features, but when the content is displayed, the features are numbered.

Embedded Video Links

The Embedded Videos content specialization enables the display of a list of YouTube video links as a link of buttons with a ‘play’ icon. If the button is pressed, the video is displayed in-situ. For each video you have to provide a link, a title and a description.

Figure : Embedded Videos Links in Editor Mode

Figure : Embedded Videos Links in User Mode

Load existing content

Using the “Load existing content” dropdown, previously created content may be loaded into any content panel.

Managing Existing Content Pages

The following actions can be performed on existing content pages:

1) Change Page URL

2) Publish

3) Un-Publish

4) Delete

5) Backup – (Not implemented)

6) Restore – (Not implemented)

Figure : Control bar, showing the Manage Page button

Figure : Control bar, showing page management functionality

Pages in the Content Lab may be published, making them available for all authorized users, while pages that have previously been published may be removed from public view by un-publishing the page. When a page is removed from public view, it is moved into the Content Lab.

Reconfiguration of page segments (Headers, Navigation bars, footers)

In Editor Mode, clicking the “Edit Page Properties” button in the Control bar opens the Page Properties screen. See Figure 70 below.

Figure 92: Page Properties screen

While in Editor Mode, the visibility of the various parts that makeup a page – the Page Segments – can be switch on or off.

Section Serialization for Mobile Devices

While viewing a website in a mobile device, it might be desirable to display the various panes or sections that are contained in a page’s layout one after the other. This is called Section Serialization.

In the Page Properties screen, there are two checkboxes that control Section Serialization:

1) Enable section serialization

2) Disable section serialization

The Section Serialization checkboxes can be location in the Page Properties screen.

The Section Serialization settings setting only affect the view of a page in a mobile device.

Editing of standard HTML page metadata

In Editor Mode, clicking the “Edit Page Properties” button in the Control bar opens the Page Properties screen. See Page Properties screen above.

The Page Properties screen provides access to the standard HTML page metadata – the Meta Elements.

Meta elements are typically used to specify page description, keywords, author of the document, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

The HTML page metadata exposed by the EndApps Platform are:

1) Description

2) Search Keywords

3) Page name

4) Title

Navigation menu configuration – labels, icons, Sorting

While in Editor Mode, Clicking on the “Manage Navigation and Data Security” button opens up the “Manage Navigation and Data Security” screen.

Figure 93: Manage Navigation and Data Security: Labels view

The Manage navigation and Data Security screen in divided into four views:

1) Labels (the initial view)

2) Security

3) Themes

4) Sorting

Labels

The Labels view of the Manage Navigation and Data Security screen can be used to change the labels of the site navigation nodes.

Themes

Figure 94: Manage Navigation and Data Security: Themes view

In the Themes view, the icons and themes of the navigational nodes can be changed.

Themes only apply to the top-level navigational nodes; icons apply to all other nodes in the navigation tree.

Icons are the images that will be displayed when the navigational nodes are shown as shortcuts.

Figure 95: Manage Navigation and Data Security: Themes view

Security

See Data security configuration.

Sorting

Nodes in the site navigation tree can be sorted. By changing a node’s order number, it can be made to move up or down in the navigational hierarchy.

It is possible to change the order of appearance of the top level nodes as well as child nodes.

Before siblings in a node can be ordered, the parent node needs to be isolated from the rest of the tree. This isolation makes it possible to view all the children of the parent node.