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
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
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 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.
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.
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
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
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.
The text entered in the Title textbox becomes the header of the panel.
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.
The content body is the content that will be displayed when the page is not in Edit View.
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
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.
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
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.
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”
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.
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.
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.
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
This is the same as the features, but when the content is displayed, the features are numbered.
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
Using the “Load existing content” dropdown, previously created content may be loaded into any content panel.
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.
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.
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.
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
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
The Labels view of the Manage Navigation and Data Security screen can be used to change the labels of the site navigation nodes.
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
See Data security configuration.
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.
Figure 96: Manage Navigation and Data Security: Sorting view
Clicking on the isolate/expand icon toggles a node from not-isolated to isolated.
Figure 97: Manage Navigation and Data Security: Node isolated for sorting
Once the parent node is isolated, a dropdown with order numbers is shown besides each child node.
Figure 98: Sorting the child nodes
The node with the lower order number will be displayed first.
While in Editor Mode, Clicking on the “Manage Navigation and Data Security” button opens up the “Manage Navigation and Data Security” screen.
Clicking on the Security button loads the Security view of the Manage Navigation and Data Security screen.
The Security view of the Manage navigation and Data Security screen can be used to assign data access permissions.
Figure 99: Manage Navigation and Data Security: Security View
Clicking on the Security icon for a node opens the Permissions assignment screen. See Permission Assignment screen below.
Figure 100: Permission Assignment screen
Using the Permission Assignment screen, activity permissions for an entity can be assigned or unassigned for specific Roles.