OpenMBEE View Editor Users Guide

View Editor (VE) enables users to interact with SysML models on the web. It implements the MMS REST API to provide a web environment to create, read, and update model elements, including Documents and Views.

Contents

About

View Editor (VE) is a web-based environment designed to interact with a systems model. VE is a document oriented view of the model elements, which are stored in OpenMBEE’s Model Management Server (MMS). Its purpose is to provide real and true data through the web so that users may interact with actual model elements without having to open a modeling software (e.g. MagicDraw ). This allows users of all levels, including non-modelers, to view or modify live documents and values of a singular source of truth.

View Editor (VE) is a web-based environment for interacting with a systems model. It provides a document oriented view of model elements, which are stored in MMS.

View Editor provides real and true data through the web so that users may interact with actual model elements without having to open modeling software (e.g. MagicDraw ). This allows users of all levels, including non-modelers, to view or modify live documents and values of a singular source of truth.

Authors can use model data, and share content across View Editor, in documents by cross referencing (see Use Cross References )

Groups, Documents and Views

The following documentations provide instructions on what View Editor “Group”, “Document” and “Views” are and how to use them.

Groups

groups Groups organize documents and other groups within a project

Create Group

Since “Group” can only be used to organize documents/groups, it can only be created under the project level.

  1. Select a parent group to create your group under in the tree or create group at the root level by navigating to the project “home”

  2. Select the plus in the left pane

    _images/image63.png

  3. Enter a title for the new group

    _images/image64.png

  4. Your group will appear in the tree

    _images/image65.png
Delete Group

Only an empty “Group” can be deleted. To delete “Super Classified Group” Group in the picture above,

  1. Select the group

    _images/image66.png

  2. Click delete and confirm the deletion

    _images/image67.png

  3. Your group will no longer appear in the tree

    _images/image68.png

Follow the same steps to delete “Super Classified Group”.

Organize Groups/Documents

“Groups” can be used to group together documents/groups. To move documents into a group:

  1. Select the “Move to/from Group” Icon in the left pane

    _images/image69.png

  2. The project tree will appear in the center pane

    _images/image70.png

  3. Drag any documents or group and drop it under another “Group” and then click save. Groups and documents at the same level are ordered alphabetically and cannot be manually ordered.

    _images/image71.png

  4. Your updated ordering will appear in the tree

    **Note: Ordering is not maintained when moving groups(s) or document(s) in or out of another group. The ordering is automatically generated with two rules: “Group” shows up before “Document” and both of them are placed in ascending order alphabetically relative to its peer.

Documents

A Document is composed of Views (see Add Views), presentation elements (see Add Presentation Elements to View), model elements, etc.

To see how a user can sync the new document to MMS, refer to Update from MMS.

Create Document

  1. In the upper right go to the project home  image37

   Or to create document as a child of a group, select the group.

  1. Select the plus in the left pane and “Add Document”

_images/image73.png

#. In the Create Document Dialogue, add a name, and select “create” button.

Delete Document

  1. Select the document you wish to delete in the tree

  2. Click on the trash button image38

    Note that deleting a view on View Editor will neither delete the View from the model nor from MMS. To delete a view permanently, delete it from the model and then commit that delete to MMS.

Structure/Edit Document

#. Build high level document structure by creating Views

#. To edit content, toggle edit mode in the upper right toolbarimage39

#. Add text, images, tables, equations, and section Presentation Elements (PEs, see Add Presentation Elements) using the plus menu image40 to the left of the document content. The advantage of using image, table, and equations PEs is that they:

  • can be cross referenced and auto-numbered (see Use Cross References)

  • appear in the exported document table of contents

  • appear in the left document navigation tree

Views

Views are sections of a document that can hold pictures, diagrams, or textual information to describe ideas and objects.

Views can be added to a document in three different ways:

  1. Adding a new View

  2. Adding a new View as a subview

  3. Adding an existing View

Add a New View

Select the document (the root on the left pane). Click on the Add button  :

_images/image77.png

Type in a name, and click on the “CREATE” button.

_images/image78.png
Add a New View as a Subview

Select the view under which you want to nest the subview and follow the same steps above:

_images/image79.png
Add an Existing View

To add an existing view to another document, select a document or view to which you want to nest the existing view under, and click on the Add button .

On the pop-up dialogue, click on the “search for existing” tab:

_images/image80.png

Select “SHARED” if you want to show the view/document and its children. Select “NONE” if you want to show only the view/document.

Select the desired search constraints: ALL, NAME, DOCUMENTATION, VALUE, or  ID.

Select the returned view element. Click on the returned hyper link.

_images/image81.png

The existing view has been embedded under another view:

_images/image82.png

You can edit this view object from the view that was just nested or from the original view. The single source of truth principle is maintained.

Note: The original view will NOT be deleted upon the deletion of this view.

Delete View

A user can delete any existing view by selecting the view on the left pane, and clicking on the Delete button   from a document.

Note that deleting a view on View Editor will neither delete the View from the model nor from MMS.

To delete a view permanently, delete it from the model and then commit that delete to MMS.

Upon deletion, the browser redirects the user to the top of the document.

Edit Views

This section focuses on the editing aspects that View Editor offers including the following capabilities:

  • High level document editing

  • Full text editing

  • Adding special elements (images, videos, links, etc)

  • Specifying element properties

  • Using cross references for “source of truth” accuracy

For more information regarding Presentation Elements as they appear in the MagicDraw model, please consult the Presentation Element Instances view.

Add Presentation Elements

Presentation elements (PE) are key components in the interaction between View Editor and the system model. They can be thought of as small, labeled containers that hold the information displayed in Views.

View Links allow you to cross reference an existing PE inside another PE. See the section, View Link, for more detail.

 The following demonstrates how to add and use various kinds of presentation elements to edit View content.

Adding Text

    The default PE for new Documents/Views is the text box. This will add a paragraph PE.

  1. Enable edit mode if not yet active

  2. Click  on image41

  3. Name it (optional)

  4. Click onimage42  to add content

Adding Section

Sections are used for adding concrete organization to views. They are similar to views in the sense that they provide a specific amount of information. They are also containers for presentation elements, and can be cross referenced.

  1. Enable edit mode if not yet active

  2. Click  on image43

  3. Name it (optional)

  4. Click new section area to add content image44

  5. You can nest other PEs to the section PE.

Adding  Comment

You can insert comments to all documents and views. Comments are saved in the model and are by default hidden from the view. See Show Comments/Elements for more information.

Adding Table

You can add a table PE. Adding a separate table PE adds an element of organization (my naming and separating it from text) to the content. It also lets you cross reference the content directly.

  1. Enable edit mode if not yet active

  2. Click  on image45

  3. Name it (optional)

  4. Click on  image46 to add content

Adding Figure and Videos

A user can add figures, such as images or videos, in an image PE.

  1. Enable edit mode if not yet active

  2. Click  on image47

  3. Name it (optional)

  4. Click on image48 to add content

Adding Equation

A user can add an equation PE.

  1. Enable edit mode if not yet active

  2. Click  on image49

  3. Name it (optional)

  4. Click on image50 to add content

Edit A Presentation Element

The following operations can be performed on views and documents:

  • Edit Style - stylize text in a similar fashion to Microsoft Word.

  • Add/edit Links

  • Find and Replace - search, find, and replace a PE

  • Edit HTML **source code **- edit the PE by modifying the HTML source code directly

Save Elements
There are several saving options when editing Presentation Elements (PEs).
To learn how to save Documents and Views as PDFs, Word Documents etc., refer to Save As.

Saving elements:

Note: When canceling, if changes have been made, the following message will appear to warn the user that canceling changes will mean that changes will not be saved. The user would need to “Cancel” out of this message and manually save the PE if the changes were desired.

_images/image93.png
Use Cross References

Cross References are pointers to other sources of information, typically text or documentation. Such references can be names, documentation, or values of model elements, as well as other views and documents. The primary benefit of cross references is that wherever they are accessed in a Document/View, the Document/View will be automatically updated when the element is modified. This is also the direct interface for changing model elements because any change to the element cross reference will be reflected in the model itself. As you will notice throughout both this guide and Model Development Kit User’s Guide , there are cross references constantly being made to other views and documents.

The following guide demonstrates the different features and capabilities for cross referencing in View Editor.

Create a Cross Reference - name, documentation, and value

  • From 2.4.0 on, there is a checkbox in the cross reference popup that allows you to restrict the editability of the cross referenced element where you inserted it. This will only affect editing in the center pane and not in the element specification on the right pane.

Search and add Cross Reference through interface

  1. Enable Edits image54

  2. Select a Presentation Element to Edit

  3. Click on image55on the editor tool bar.

  4. You can search for the existing element by the following fields:

    1. Name

    2. Documentation

    3. Value ( & Name of a different element in this case)

    4. Element ID

  5. Select the element you want to cross reference.

  6. Click on the item that you want to cross reference

  7. You will see a blue box with the label, cf: xxxxx, where xxxxx is the name of the cross referenced object.

_images/image95.png
Find Cross Reference inline

  1. Enable Edits image56

  2. Select a Presentation Element to Edit

  3. You can use the ‘@’ symbol to find cross references inline

  4. Can use the up/down arrow to highlight and select element

_images/image96.png

Editing cross referenced elements

  1. Cross referenced element can come from:

    • Different part in View Editor

    • New Cross Reference

  2. Bonus: Run “Update from MMS” in MagicDraw to see the changes to the elements

    • More information can be found in the description

To learn more about how the edited elements are synced back into the Model, see Update from MMS.

Reorder Views/Elements

You can reorder Views and Presentation Elements (PEs) to change the hierarchy of the elements.

Reorder Views (Enhanced)

  1. Click on the “Reorder Views” button on the left pane.

  2. _images/image97.png

  3. Drag and drop the tile to reorder views as desired.

_images/image98.png

Note: The blue position guide arrows let you know where the view/document will be inserted as you drag a tile:

_images/image99.png

Note: When a view that has subviews is selected to be moved, all of its subviews will move with it.

To learn about adding different types of views, refer to [cf:Add Views.vlink]

Capabilities:

  • Switch 2 views

  • Move a view to become a subview

  • Move a view to become a parent of another

  • Change node level (depth)

Notes for Modelers/Developers:

Each view will have indication of which type of connection it’s under (composite/shared/none), only composite/shared views will show their child views. Hence you cannot move views under a view that’s connected as “none”

Known issue -Section numbering has been added since version 3.2.2, but view reordering page still showing numbers as if sections aren’t numbered. We are working on a more robust reordering option.

Reorder Presentation Elements (PEs)

1. Click on the “Reorder Content” button on the right pane.

_images/image100.png

2. Drag and drop the tile to move the elements around and reorder them as desired.

_images/image101.png

For more information on PEs, refer to Add Presentation Elements

For more information of other tools in the Right Pane, refer to Right Pane Capabilities

Save As

You can save Documents and Views locally. The following guides demonstrate the options for saving Views and Documents.

Save As options include the following for both Documents and Views:

Print to Printer and Save to PDF or Word will also generate the table of contents, list of tables, list of figures, and update the numbering within the document for any links. The popup will also allow you to enter custom header and footer info, with prefilled info if it’s available in the model (through the Document stereotype’s docMetadata tags).

Generate PDF

See these subsections for more information about specific generations:

  1. Generate PDF of Document

  2. Generate PDF with Model Based Cover

  3. PDF Customization

Generate PDF of View/Document

**Save View as PDF **image60

_images/image103.png

You can convert the document/view to a PDF file and save.

Step By Step Instructions:

  • Select the view you want to convert

  • Click ” Export ” button

  • Select ” Export to PDF “

  • If not in ” Full View ” mode, a dialogue window will pops up, asking if you want to export from Full View.

  • Generate PDF Document dialogue will pop up:

    • Choose whether or not to create list of tables and figures

      • If you wish to generate list of tables and figures based on the presentation element type, check* Use HTML for List of Tables and Figures (will not include equations and may differ from web numbering) *option

    • Check landscape option if necessary

  • Click on ” Generate PDF “

             image61

  • You will receive an email with the link to the document/view, converted PDF

                image62

         Follow the link in the email message to view the PDF document, stored in Alfresco. To download, click on the Download button. To view in the browser, click on the “View In Browser”.

_images/image106.png

Options provided in “GENERATE PDF DOCUMENT” Dialogue Window

  1. Generate List of Tables and Figures:

    Check the box if you wish to generate a list of tables and figures beneath the Table of Contents.

2. Use HTML for List of Tables and Figures (will not include equations and may differ from web numbering):

    Choose this option if you wish to generate the list of tables and figures from all existing tables and figures in documents/views.

    Leave the box unchecked If you wish to generate the lists based on the associated presentation elements

    Note: Images in <figure> tags are used to generate the list.

Generate PDF with Model Based Cover Page

In certain circumstances, you may want to create a custom cover page for a chosen document. The cover page is identified as the first View and has the Metatype of “Document” (highlighted below on the right pane). See below for the cover page of this User Guide:

This can be done in two ways:

  1. View Editor

    1. A user would edit the cover page exactly the same way as any other view in the document.

    2. A user can add Presentation Elements (including texts, pictures, etc.) and edit through normal ways.

    3. This is ideal for customizing one document at a time.

  2. MagicDraw

    1. A user can add a normal ViewPoint to any cover page, the same way a user would do for any view.

    2. All normal ViewPoint methods are available for the Cover Page as well.

    3. This is ideal for creating a reusable cover pages.

    4. See Create a Reusable Cover Page more information.

Save to Word Document

Save Document/View To Wordimage63

  • You can convert the document/view to a Word file and save.

Step-by-step instructions:

  1. Click on ” Export ” button, and select “Export to Word” (See below)

  2. If not in ” Full View ” mode, a dialogue window will pops up, asking if you want to export from Full View.

  3. You will receive an email with the link to the converted Word document/view.

_images/image103.png
Export Tables

Tables to CSV “”””””””””””’

            image64

  • Click on ” Export ” button, and select ” Table to CSV “

  • You will see the following prompt:

        image65

  • Click on Export To CSV. The popup window below will display.

        image66

  • Click on ” Save to CSV ” button to store the table in a view/document as a CSV file.

Save all tables from document to CSV

  • Go to the full document by clicking on image67button.

  • Follow the steps above.

Export Rapid Table

  1. Filter and export options are available when tables (“rapid tables”) are generated through MagicDraw. In the following clip, the user began with an existing rapid table (“Community Resources” on MagicDraw and demonstrates how to filter the contents and export the full table as CSV.       image68

  2. Learn how to create a Rapid Table in a view here: Create and Generate a Rapid Table

  3. The Filter and Export icons appear (see the orange arrow in the image above):

  4. You can also export a filtered table by following the same steps but not “Reset” filter

To Filter Table

  1. Click “Filter Table” button

  2. Enter desired filter and “Apply”

  3. “Reset” filter

To Export CSV (*can be cross referenced to”Save as” screencast )

  1.    Click “Export CSV” button

  2.    Open with default settings

Version Control

Branches and Tags are used for project version control.

  • A branch is an editable copy of a project

  • A tag is a read-only snapshot of a project at a certain time

  • For element version documentation, please see Element History

Branches

  • From a high level perspective, View Editor branches are similar to Git branches.

  • They create a separate workspace built upon a duplication of data at a specified time.

  • A branch contains live data; however, the live data is a duplicated copy and therefore any changes made in the Branch do not affect the live data in the “master” branch

  • Branches are configured to be able to sync with Teamwork Branches of the same name. Refer to Branch Syncing for more information

Tags

  • View Editor Tags are “snapshots” of all the data on a View Editor project at specified times.

  • They are read-only

  • This offers users a chance to freeze data at specific and relevant times, including reviews and releases

Create/Delete Branches and Tags

A user can create Branches and Tags from the Manage Branches/Tags Page. From there, a user can inspect, add or delete branches. Master branch can not be deleted

Create Branch

  1. Click on “Manage Branches/Tags” button from the Branch/Tag dropdown menu on top right.**

  2. In Manage Branches/Tags view, select the version to branch off of and click the “+BRANCH” button:

_images/image116.svg

  1. Follow the dialogue:

_images/image118.svg

  1. Name of the branch is required.

  2. Set permissions by selecting from the options provided - “Read” or “Write”

    1. By default, the user who created the branch will be able to edit no matter what option is chosen.

    2. Creating a “Read” branch means that only the creator and those who are granted specific permissions can edit that branch.

    3. “Write” enables all users the ability to edit the branch

Create Tag

  1. Tags can be created the same way as branches (see Create Branch)

  2. Upon creation, the user can choose what timestamp the tag should reflect, either “Now” or “Specified

    1. By default, “Now” is selected and the timestamp of “Now” is shown

    2. If a user chooses “Specified”, then the user has to manually enter a time for the Tag to be taken.

    3. The user can specify year, hour, and minute - although there are decimal numbers shown by default, a user should delete these values since new ones will be generated upon Tag creation

Delete Branch/Tag

#. In Manage Branches/Tags view, select the branch/tag you wish to delete**

  1. Click “Delete” Button**

Once deleted, the branches/tags can no longer be accessed

_images/image120.svg

Branch Syncing

Note: This applies to Teamwork Cloud (TWC) projects, but not local projects as the latter do not have branching.

Both TWC and MMS support branching as a part of their version control functionality. MDK syncs branches created in TWC by committing them to MMS. To validate the branches on both sides, select “MMS” from the main menu > “Validate” > “Branches”. Validation rule violations will be presented if they are not in sync, and resolutions can be selected by right clicking each violation.

_images/image121.png _images/image122.png

Advanced Features

This section is dedicated to View Editor Advanced Features, including visualizations and custom tags.

Visualizations

For TomSawyer diagrams or plots, please see the DocGen Manual.

Temporal Diff Tag

Compares an element at two different refs/commits and generates a diff highlighting what has been added and deleted. You can use the element history view in the right pane to access element level changes.

Example Code

:mark:`<mms-diff-attr mms-base-element-id="" (mms-compare-element-id="") mms-attr="name|doc|val"    (mms-base-project-id="" mms-compare-project-id="" mms-base-ref-id="" mms-compare-ref-id=""     mms-base-commit-id="" mms-compare-commit-id="")></mms-diff-attr>`

Group Documents

The Group Documents directive generates a table used to reference all the document links within a site. This can be placed on the cover page of a group.

Here is an example of how you would define the directive to load the appropriate HTML.

:mark:`<mms-group-docs mms-group-id="\_18_0_2_bec02f9_1446154915939_541002_41021">[cf:site docs]</mms-group-docs>`

Here is an example of document links for CAE View Editor site.

_images/image123.png

Autosave to the browser’s localStorage

This feature automatically stores unsaved contents from any of the CKEditors to the browser’s localStorage except for the editor on the Comment’s Modal, Proposal’s Modal, Cross Reference Modal and Workspace’s description. The contents will be auto saved at a configurable interval of 5 seconds and with the users’ consent reloaded automatically to the editors which they belong.

These auto saved contents are automatically deleted when either one of the following conditions is met:

  1. Users press on one of the following buttons on the editor itself:

    1. save

    2. save and continue

    3. cancel: when the dialog shows up and users confirm the cancellation

    4. delete: when the dialog shows up and users confirm the deletion

  2. Users press on one of the following buttons on the toolbar located on the right side of the app’s layout

    1. save

    2. save and continue

    3. cancel: when the dialog shows up and users confirm the cancellation

    4. saveAll: This button is a little bit special because it shows up in two different situations.

      1. Shows up after users click on the “Edit Element” button on the toolbar located on the right side of the app’s layout. In this case, it will delete all the new auto saved contents related to the specific element the user is editing.

      2. Shows up after a user modifies one or more elements on the page. In this case, it will delete all the new auto saved contents corresponding to all these elements.

When saving to a full capacity browser’s localStorage, all expired auto saved contents will be automatically deleted to make room for new contents.

Table Sorting and Filtering

There are three main functionalities:

  1. Sorting a column

  2. Table-Wide filtering

  3. Column(s)-Wide filtering

Sorting and Column(s)-Wide Filtering features are enabled only for the top level table’s header columns. Please read further for special rules of these features regarding different types of content such as an image, an SVG, and a nested table.

Sorting Feature works on a single column at a time (no multi-columns sorting) with the following capabilities and rules:

  1. Sorting is done alphabetically in an ascending or descending order

  2. Content such as a nested table, an image and a SVG are not considered sortable and as a result, when sorting them among other text-only content, they will either be pushed to the bottom or the top based on the sorting order

  3. To restore the original content’s order, click the “Reset Sort” button which appears when the order of the content is changed

Table-Wide filtering works by comparing the user’s specified filter term against the content of every row on the table with the following rules:

  1. Images and SVG are not filterable

  2. Filter term can either be an exact match or just a partial match of the content in the table

Column(s)-Wide Filtering allows filtering on a column or multiple columns in a sense that additional filtering can be performed further on top of the previously filtered results.    Column(s)-Wide Filtering works the same way as Table-Wide Filtering regarding the types of content that can be filtered. Table-Wide and Column(s)-Wide Filtering don’t work on top of each other; when Column(s)-Wide Filtering already filters some results, Table-Wide Filtering will perform the filtering on the original content instead of the filtered results and vice versa. To enable Table-Wide and Column(s)-Wide Filtering features, click the “Filter table” button.

Configure Auto-numbering

By default figure and table auto-numbering are sequential. To change the numbering scheme, fill in the “figureContextDepth” and “figureSeparator” tag values on the Document stereotype in the model. figureContextDepth controls how many levels of context to show, figureSeparator is the separator between context and number.

Ex. 2 and - results in numbering that looks like 1.3-2 or 1.0-3

To suppress MD generated table or figure captions:

In docgen or userscripts, use the “excludeFromList” option to prevent a generated table or figure from displaying captions and exclude from list of tables and figures

PDF Customization

When exporting to pdf, the user can choose to provide their own css stylesheet. If this Advanced Options is used, the header and footer options from the Basic Options tab are ignored.

VE uses PrinceXML for styling PDFs. See Prince User Guide for all options.

By default, this is the CSS that’s used:

:mark:`/\*------------------------------------------------------------------ Custom CSS Table of Contents 1. Images 2. Tables 3. Typography 3.1 Diff 3.2 Errors 4. Figure Captions 5. Table of Contents 6. Page Layout 7. Headers and Footers 8. Signature Box 9. Bookmark Level ------------------------------------------------------------------\*/ /\*------------------------------------------------------------------ 1. Images ------------------------------------------------------------------\*/ img {max-width: 100%; page-break-inside: avoid; page-break-before: auto; page-break-after: auto; margin-left: auto; margin-right: auto;} img.image-center {display: block;} figure img {display: block;} .pull-right {float: right;} /\*------------------------------------------------------------------ 2. Tables ------------------------------------------------------------------\*/ tr, td, th { page-break-inside: avoid; } thead {display: table-header-group;} table {width: 100%; border-collapse: collapse;} table, th, td {border: 1px solid black; padding: 4px; font-size: 10pt;} table[border='0'], table[border='0'] th, table[border='0'] td {border: 0px;} table, th > p, td > p {margin: 0px; padding: 0px;} table, th > div > p, td > div > p {margin: 0px; padding: 0px;} table mms-transclude-doc p {margin: 0 0 5px;} th {background-color: #f2f3f2;} /\*------------------------------------------------------------------ 3. Typography ------------------------------------------------------------------\*/ h1, h2, h3, h4, h5, h6 {font-family: 'Arial', sans-serif; margin: 10px 0; page-break-inside: avoid; page-break-after: avoid;} h1 {font-size: 18pt;} h2 {font-size: 16pt;} h3 {font-size: 14pt;} h4 {font-size: 13pt;} h5 {font-size: 12pt;} h6 {font-size: 11pt;} .ng-hide {display: none;} .chapter h1.view-title {font-size: 20pt; } body {font-size: 10pt; font-family: 'Times New Roman', Times, serif; } /\*------------------------------------------------------------------ 3.1 Diff ------------------------------------------------------------------\*/ ins, .ins {color: black; background: #dafde0;} del, .del{color: black;background: #ffe3e3;text-decoration: line-through;} .match,.textdiff span {color: gray;} .patcher-replaceIn, .patcher-attribute-replace-in, .patcher-insert, .patcher-text-insertion {background-color: #dafde0;} .patcher-replaceIn, .patcher-attribute-replace-in, .patcher-insert {border: 2px dashed #abffb9;} .patcher-replaceOut, .patcher-delete, .patcher-attribute-replace-out, .patcher-text-deletion {background-color: #ffe3e3; text-decoration: line-through;} .patcher-replaceOut, .patcher-delete, .patcher-attribute-replace-out {border: 2px dashed #ffb6b6;} .patcher-text-insertion, .patcher-text-deletion {display: inline !important;} [class*=\\"patcher-\\"]:not(td):not(tr) {display: inline-block;} /\*------------------------------------------------------------------ 3.2 Errors ------------------------------------------------------------------\*/ .mms-error {background: repeating-linear-gradient(45deg,#fff,#fff 10px,#fff2e4 10px,#fff2e4 20px);} /\*------------------------------------------------------------------ 4. Figure Captions ------------------------------------------------------------------\*/ caption, figcaption, .mms-equation-caption {text-align: center; font-weight: bold;} table, figure {margin-bottom: 10px;} .mms-equation-caption {float: right;} mms-view-equation, mms-view-figure, mms-view-image {page-break-inside: avoid;} /\*------------------------------------------------------------------ 5. Table of Contents ------------------------------------------------------------------\*/ .toc, .tof, .tot {page-break-after:always;} .toc {page-break-before: always;} .toc a, .tof a, .tot a { text-decoration:none; color: #000; font-size:9pt; } .toc .header, .tof .header, .tot .header { margin-bottom: 4px; font-weight: bold; font-size:24px; } .toc ul, .tof ul, .tot ul {list-style-type:none; margin: 0; } .tof ul, .tot ul {padding-left:0;} .toc ul {padding-left:4em;} .toc > ul {padding-left:0;} .toc li > a[href]::after {content: leader('.') target-counter(attr(href), page);} .tot li > a[href]::after {content: leader('.') target-counter(attr(href), page);} .tof li > a[href]::after {content: leader('.') target-counter(attr(href), page);} /\*------------------------------------------------------------------ 6. Page Layout ------------------------------------------------------------------\*/ @page {margin: 0.5in;} @page landscape {size: 11in 8.5in;} .landscape {page: landscape;} .chapter {page-break-before: always} p, div {widows: 2; orphans: 2;} /\*------------------------------------------------------------------ 7. Headers and Footers ------------------------------------------------------------------\*/ @page:first {@top {content: ''} @bottom {content: ''} @top-left {content: ''} @top-right {content: ''} @bottom-left {content: ''} @bottom-right {content: ''}} /\*------------------------------------------------------------------ 8. Signature Box ------------------------------------------------------------------\*/ .signature-box td.signature-name-styling {width: 60%;} .signature-box td.signature-space-styling {width: 1%;} .signature-box td.signature-date-styling {width: 39%;} /\*------------------------------------------------------------------ 9. Bookmark Level ------------------------------------------------------------------\*/ .h1 {bookmark-level: 1;} .h2 {bookmark-level: 2;} .h3 {bookmark-level: 3;} .h4 {bookmark-level: 4;} .h5 {bookmark-level: 5;} .h6 {bookmark-level: 6;} .h7 {bookmark-level: 7;} .h8 {bookmark-level: 8;} .h9 {bookmark-level: 9;}`

For page related css, see Paged Media
VE css classes

Available Classes

selector

description

.ve- cover-page

container of the document cover page

.chapter

top level views (1, 2, 3, etc)

.fir st-chapter

first view

.h1, .h2, .h3, etc

corresponds to view or section titles at that level (title of view/section 1.2.3 would have class of .h3)

.v iew-title, .sec tion-title

the h1 title of a view or section

.toc

table of contents

.tof

list of figures, list of equations

.tot

list of tables

.landscape

landscape elements
Example customizations
Change font size of titles based on level:

:mark:`//smaller sizes for nested titles .h1 {font-size: 18pt;} .h2 {font-size: 14pt;} .h3 {font-size: 12pt;} .h4 {font-size: 10pt;} .h5, .h6, .h7, .h8, .h9 {font-size: 9pt;} //start top level sections on odd pages .chapter {page-break-before: right;}`

Starting page number on a certain page:

:mark:`//start toc on odd page, set page number to 5, give it page style toc .toc {page-break-before: right; counter-reset: page 5;} .toc, .tof, .tot {page-break-after:always; page: toc;}`

Using Roman numerals:

:mark:`//alternating footers and roman numeral page number for toc pages @page toc:right { @bottom-left {font-size: 9px; content: 'footer';} @bottom-right {font-size: 9px; content: counter(page, lower-roman);}} @page toc:left { @bottom-right {font-size: 9px; content: 'footer';} @bottom-left {font-size: 9px; content: counter(page, lower-roman);}}`

Alternating footers based on odd/even pages:

:mark:`//start main content at page 3, alternating numbers .first-chapter {counter-reset: page 3;} @page:right { @bottom-left {font-size: 9px; content: 'footer';} @bottom-right {font-size: 9px; content: counter(page);}} @page:left { @bottom-right {font-size: 9px; content: 'footer';} @bottom-left {font-size: 9px; content: counter(page);}}`

Advanced Cf

A cross reference can also specify another branch or time, ex.

<mms-cf mms-element-id=”elementId” mms-ref-id=”refid” mms-commit-id=”commit id” mms-project-id=”projectid” mms-cf-type=”name”></mms-cf>

refId, commitId, and projectId are optional and not included when adding cf via the UI. If they’re not included, they inherit the parent element’s, then ‘master’ for refId and ‘latest’ for commitId.

The attributes can be added manually via the text editor’s html editing tab if desired.

View Editor User Guide: 10 Run XLR

There’s a custom tag one can add to trigger an XLR release from any view.

To add the button, go into source mode of a text field and add the following:

<run-xlr template-id=”{templateId}” xlr-task-name=”Run XLR” xlr-release-name=”release name”>ignore</run-xlr>

Where the template-id is the string in the url for the xlr design template, with ‘/’ instead of ‘-‘.

Ex, if the url in xlr for your template is this:

https://cae-xlrelease.jpl.nasa.gov/#/templates/Folder898892011-Folder521642095-Folder47c1077774ae4cf69d499daa260b3904-Release619d801931384eae9a25ba8baff2,

the template-id would be

Folder898892011/Folder521642095/Folder47c1077774ae4cf69d499daa260b3904/Release619d801931384eae9a25ba8baff2

The xlr-task-name attribute is just the name of the button that will display.

The xlr-release-name is what the release will be called in xlr.

Once a user clicks the button, a login popup will appear, this is for logging into xlrelease using jpl username/pass and permission to create a release based on the template is controlled by xlr.

Currently will send the following as variables in the release:

“contentEditor”: jpl username

“editorEmail”: jpl email

Glossary