Difference between revisions of "Summary Templates"

From IMSMA Wiki
Jump to: navigation, search
Line 1: Line 1:
 +
==The View Designer Window==
 
__FORCETOC__
 
__FORCETOC__
 
{{TOC right}}
 
{{TOC right}}
  
−
==Editing a View==
+
[[File:ViewDesignerAndVictimView.png|thumb|left|300px|alt=The Victim View and View Designer - side by side.|The Victim View - as displayed in the both Current View and View Designer Windows]]
−
#In the IMSMA Navigation window, click Customisation and then select View Manager.
 
−
#Select an object from the Object list.
 
−
#Select a view from the Custom View table and click [[Image:FieldViewIcon.png]].
 
−
:The View Designer opens, with an elements pane on the left and a design pane on the right.
 
  
−
==Using the View Designer Buttons==
+
The View Designer window lets you modify how an item's data displays in the [[Current View Window]]. When you edit an existing view, the View Designer window presents you with a graphical representation of the selected view; all of the elements are in exactly the same positions. The [[Media:ViewDesignerAndVictimView.png | figure]] to the right shows an example.
  
−
===Tabs===
+
There are two panes in the View Designer window. On the right is the design pane, where you can add, remove, and modify elements. Above the design pane is a series of tabs that let you switch between pages. The pane on the left displays a data tree of elements available for the selected item. You can drag elements to and from the data tree to populate your view.
−
{| class="wikitable" width="500" style="margin:10px;"
+
 
 +
When you have finished customising the view, you can either save it with a new name or overwrite an existing view. Whatever file you save is placed in the View Manager window with a [[Using the View Manager Tool in IMSMANG#View Status | status]] of ''draft''. You still have to [[Using the View Manager Tool in IMSMANG#Publishing a View | publish]] it before it is visible to IMSMA users.
 +
 
 +
The following sections describe how to complete common tasks in the View Designer window. For a complete list of the available functions, refer to [[Using the View Manager Tool in IMSMANG#View Designer User Interface Buttons | View Designer User Interface Buttons]].
 +
 
 +
==Adding Data Elements==
 +
''Data Elements'' are the relevant information (gathered during [[Entering Data into IMSMANG#Entering Data into the Field Report Template | field report data entry]]) that display on an item's view. You can move existing data elements around in the design pane, and resize, relabel, or delete them. You can also add from a library of elements by dragging them from the data tree to the design pane. With certain exceptions, only one instance of the same data element can be added to each tab.
 +
 
 +
# Click the tab on which you want to add the data element.
 +
# Drag an element from the data tree to the design pane.
 +
# Double-click the element's graphic or label to edit its properties.
 +
# If you are editing a table:
 +
## Double-click the left border of a table to edit its size and to [[Select Display Columns | select display columns]].
 +
## Double-click a column label to edit it.
 +
## Drag the boundaries of a column to change its width.
 +
 
 +
==Adding Graphic Elements==
 +
''Graphic Elements'' make up the visual layout of an item's view, and are unaffected by field report data entry. They are the [[Using the View Manager Tool in IMSMANG#Lines | lines]] that border or separate sections, [[Using the View Manager Tool in IMSMANG#Text Boxes | text boxes]] where messages can be written, and [[Using the View Manager Tool in IMSMANG#Images | images]] (like photographs, maps, and diagrams) that add to the visual aesthetic. All graphic elements are located in the View Designer data tree, inside the '''Tool Folder'''.
 +
 
 +
===Lines===
 +
# Click the tab on which you want to add the line.
 +
# Drag the '''Line Tool''' from the Tool folder in the data tree to the design pane.
 +
# Double-click the line to edit its width, length, and orientation.
 +
 
 +
===Text Boxes===
 +
# Click the tab on which you want to add the text box.
 +
# Drag the '''Text Tool''' from the Tool folder in the data tree to the design pallate.
 +
# Double-click the text box to add the desired text (in place of the default "Text Tool") and edit the font style and size. Note that the text box borders will expand or contract to fit its contents.
 +
 
 +
===Images===
 +
# Click the tab on which you want to add the image.
 +
# Drag the '''Icon Tool''' from the Tool folder in the data tree to the design pane.
 +
# Double-click the Icon Tool widget to resize its boundaries and choose an image file to import. Note that the Icon Tool borders will expand or contract to fit the imported file.
 +
 
 +
==Saving a View==
 +
When you have finished customizing your view, do one of the following:
 +
* Click '''Save As''' to save the custom view as a separate entry in the View Manager Window.
 +
* Click '''Save''' to overwrite the existing custom view.
 +
 
 +
Remember to [[Using the View Manager Tool in IMSMANG#Publishing a View | publish]] the view if you want to activate it in IMSMA.
 +
 
 +
==View Designer User Interface Buttons==
 +
The following table lists all of the GUI buttons avaiable in the View Designer window and their purposes:
 +
 
 +
{| class="wikitable"
 +
|+ View Designer Interface
 +
! Desired Elements
 +
! Steps to Achieve
 +
|-
 +
| Tabs
 +
|
 
|-
 
|-
−
| width="250pt" | '''How To'''
+
| style="padding-left: 2em" | Move a tab to the left or right of other tabs
−
| width="250pt" | '''Step to Complete'''
+
| Click a tab, and then click the [[Image:ViewDesignerTabLeft.png | Move Tab Left]] or [[Image:ViewDesignerTabRight.png | Move Tab Right]] buttons.
 
|-
 
|-
−
| Move a tab to the left or right of other tabs || Click a tab, and then click [[Image:leftRedArrow2.png]] or [[Image:rightRedArrow.png]].
+
| style="padding-left: 2em" | Add a new tab
 +
| Click the [[Image:ViewDesignerNewTab.png | New Tab "*"]] and then double-click the ''New Tab'' label to rename it.
 
|-
 
|-
−
| Add a new tab || Click [[Image:newTab.png]], and then select New Tab to rename it.
+
| style="padding-left: 2em" | Delete a selected tab
 +
| Click the '''x''' by the tab name ([[Image:ViewDesignerDeleteTab.png]]).
 
|-
 
|-
−
| Delete a selected tab || Click the '''x''' by the tab name: [[Image:deleteTab.png]].
+
| style="padding-left: 2em" | Set page layout and size
 +
| Click '''Tab Setup'''.
 
|-
 
|-
−
| Set page layout and size || Click '''Tab Setup'''.
+
| style="padding-left: 2em" | Clear all elements from a selected tab
 +
| Click '''Clear Tab'''.
 
|-
 
|-
−
| Location || Click '''Clear Tab'''.
+
| Elements
 +
|
 
|-
 
|-
−
| Clear all elements from all tabs. || Click '''Clear All Tabs'''.
+
| style="padding-left: 2em" | Delete selected elements from a selected tab
−
|}
+
| Click '''Clear'''.
−
 
 
−
===Elements===
 
−
{| class="wikitable" width="500" style="margin:10px;"
 
 
|-
 
|-
−
| width="250pt" | '''How To'''
+
| style="padding-left: 2em" | Align selected elements
−
| width="250pt" | '''Step to Complete'''
+
| Click '''Align'''.
 
|-
 
|-
−
| Delete selected elements from the design pane || Click '''Clear'''.
+
| style="padding-left: 2em" | Modify the properties of a selected element
 +
| Click '''Properties'''.
 
|-
 
|-
−
| Align selected elements || Click '''Align'''.
+
| style="padding-left: 2em" | Clear all elements from all tabs
 +
| Click '''Clear All Tabs'''.
 
|-
 
|-
−
| Modify the properties of a selected element || Click '''Properties'''.
+
| General
−
|}
+
|
−
 
 
−
===General===
 
−
{| class="wikitable" width="500" style="margin:10px;"
 
 
|-
 
|-
−
| width="250pt" | '''How To'''
+
| style="padding-left: 2em" | Undo or redo previous actions
−
| width="250pt" | '''Step to Complete'''
+
| Click the [[Image:ViewDesignerUndo.png | Undo]] or [[Image:ViewDesignerRedo.png | Redo]] buttons.
 
|-
 
|-
−
| Undo or redo previous actions || Click [[Image:undoBtn.png]] or [[Image:redoBtn.png]].
+
| style="padding-left: 2em" | Save your changes to the view
 +
| Click '''Save'''.
 
|-
 
|-
−
| Save your changes to the view || Click '''Save'''.
+
| style="padding-left: 2em" | Save your view as new
 +
| Click '''Save As'''.
 
|-
 
|-
−
| Save your view as new || Click '''Save As'''.
+
| style="padding-left: 2em" | Print and preview a view
 +
| Click '''Preview'''.
 
|-
 
|-
−
| Preview and print a view || Click '''Preview'''.
+
| style="padding-left: 2em" | Exit the View Designer
 +
| Click '''Close'''.
 
|-
 
|-
−
| Exit the View Designer || Click '''Close'''.
 
−
|}
 
−
 
−
==Adding Data Elements==
 
−
#Drag a data element from the elements pane into the design pane.
 
−
#Double-click the data element or label to edit its properties.
 
−
 
−
{| style="border:2px solid lightgray; float:center; margin:10px;"
 
−
|align="left" style="padding: 5px 10px 5px 10px"|[[Image:bulb2.png|25px|Represents a tip or note for using IMSMA Mobile.]]
 
−
|align="left" style="padding: 5px 10px 5px 10px"| Editing a '''table''':
 
−
*Double-click the left border of a table to edit its size and to pick column headers
 
−
*Double-click a column header to edit it
 
−
*Drag the boundaries of a column to change its width
 
−
|}
 
−
 
−
==Adding Graphic Elements==
 
−
===Adding Lines===
 
−
#Drag the '''Line Tool''' from the Tool folder to the design pane.
 
−
#Double-click the line to edit its shape and properties.
 
−
 
−
===Adding Text Boxes===
 
−
#Drag the '''Text Tool''' from the Tool folder to the design pane.
 
−
#Double-click the text box to edit its contents and properties.
 
−
 
−
{| style="border:2px solid lightgray; float:center; margin:10px;"
 
−
|align="left" style="padding: 5px 10px 5px 10px"|[[Image:bulb2.png|25px|Represents a tip or note for using IMSMA Mobile.]]
 
−
|align="left" style="padding: 5px 10px 5px 10px"| The size and shape of the text box is set automatically as text is entered or deleted.
 
−
|}
 
−
 
−
===Adding Images===
 
−
#Drag the '''Icon Tool''' from the Tool folder to the design pane.
 
−
#Double-click the icon to resize its boundaries and to choose an image to import.
 
−
 
−
{| style="border:2px solid lightgray; float:center; margin:10px;"
 
−
|align="left" style="padding: 5px 10px 5px 10px"|[[Image:bulb2.png|25px|Represents a tip or note for using IMSMA Mobile.]]
 
−
|align="left" style="padding: 5px 10px 5px 10px"| Set the size and shape of the actual image before importing the file into IMSMA<sup>NG</sup>.
 
−
 
−
T'''he icon element boundaries automatically resize to fit the imported image.
 
−
|}
 
−
 
−
==Publishing a Custom View==
 
−
#In the IMSMA Navigation window, click '''Customisation''' and then select '''View Manager'''.
 
−
#Select a view from the Custom View table and '''click''' [[Image:customView.png]].
 
−
#:The view status changes to '''published''', and the status of the previously published view changes to '''archived'''.
 
−
#Click '''Done'''.
 
−
#Open the same type of object in the items pane on the IMSMA Navigation window.
 
−
#:Object data now display in the newly published view.
 
−
 
−
{| style="border:2px solid lightgray; float:center; margin:10px;"
 
−
|align="left" style="padding: 5px 10px 5px 10px"|[[Image:bulb2.png|25px|Represents a tip or note for using IMSMA Mobile.]]
 
−
|align="left" style="padding: 5px 10px 5px 10px"| A view with a '''status''' of:
 
−
*'''published''' is the active view for the selected object
 
−
*'''draft''' has not yet been published
 
−
*'''archived''' has been unpublished
 
−
 
−
Draft or archived views can be deleted if they are no longer needed. To '''delete''', select the view and '''Click''' [[Image:EcksButton.png]].
 
 
|}
 
|}

Revision as of 15:32, 19 February 2013

The View Designer Window

The Victim View and View Designer - side by side.
The Victim View - as displayed in the both Current View and View Designer Windows

The View Designer window lets you modify how an item's data displays in the Current View Window. When you edit an existing view, the View Designer window presents you with a graphical representation of the selected view; all of the elements are in exactly the same positions. The figure to the right shows an example.

There are two panes in the View Designer window. On the right is the design pane, where you can add, remove, and modify elements. Above the design pane is a series of tabs that let you switch between pages. The pane on the left displays a data tree of elements available for the selected item. You can drag elements to and from the data tree to populate your view.

When you have finished customising the view, you can either save it with a new name or overwrite an existing view. Whatever file you save is placed in the View Manager window with a status of draft. You still have to publish it before it is visible to IMSMA users.

The following sections describe how to complete common tasks in the View Designer window. For a complete list of the available functions, refer to View Designer User Interface Buttons.

Adding Data Elements

Data Elements are the relevant information (gathered during field report data entry) that display on an item's view. You can move existing data elements around in the design pane, and resize, relabel, or delete them. You can also add from a library of elements by dragging them from the data tree to the design pane. With certain exceptions, only one instance of the same data element can be added to each tab.

  1. Click the tab on which you want to add the data element.
  2. Drag an element from the data tree to the design pane.
  3. Double-click the element's graphic or label to edit its properties.
  4. If you are editing a table:
    1. Double-click the left border of a table to edit its size and to select display columns.
    2. Double-click a column label to edit it.
    3. Drag the boundaries of a column to change its width.

Adding Graphic Elements

Graphic Elements make up the visual layout of an item's view, and are unaffected by field report data entry. They are the lines that border or separate sections, text boxes where messages can be written, and images (like photographs, maps, and diagrams) that add to the visual aesthetic. All graphic elements are located in the View Designer data tree, inside the Tool Folder.

Lines

  1. Click the tab on which you want to add the line.
  2. Drag the Line Tool from the Tool folder in the data tree to the design pane.
  3. Double-click the line to edit its width, length, and orientation.

Text Boxes

  1. Click the tab on which you want to add the text box.
  2. Drag the Text Tool from the Tool folder in the data tree to the design pallate.
  3. Double-click the text box to add the desired text (in place of the default "Text Tool") and edit the font style and size. Note that the text box borders will expand or contract to fit its contents.

Images

  1. Click the tab on which you want to add the image.
  2. Drag the Icon Tool from the Tool folder in the data tree to the design pane.
  3. Double-click the Icon Tool widget to resize its boundaries and choose an image file to import. Note that the Icon Tool borders will expand or contract to fit the imported file.

Saving a View

When you have finished customizing your view, do one of the following:

  • Click Save As to save the custom view as a separate entry in the View Manager Window.
  • Click Save to overwrite the existing custom view.

Remember to publish the view if you want to activate it in IMSMA.

View Designer User Interface Buttons

The following table lists all of the GUI buttons avaiable in the View Designer window and their purposes:

View Designer Interface
Desired Elements Steps to Achieve
Tabs
Move a tab to the left or right of other tabs Click a tab, and then click the Move Tab Left or Move Tab Right buttons.
Add a new tab Click the New Tab "*" and then double-click the New Tab label to rename it.
Delete a selected tab Click the x by the tab name (ViewDesignerDeleteTab.png).
Set page layout and size Click Tab Setup.
Clear all elements from a selected tab Click Clear Tab.
Elements
Delete selected elements from a selected tab Click Clear.
Align selected elements Click Align.
Modify the properties of a selected element Click Properties.
Clear all elements from all tabs Click Clear All Tabs.
General
Undo or redo previous actions Click the Undo or Redo buttons.
Save your changes to the view Click Save.
Save your view as new Click Save As.
Print and preview a view Click Preview.
Exit the View Designer Click Close.
Retrieved from "http://mwiki.gichd.org:8090/mediawiki/index.php?title=Summary_Templates&oldid=6719"