Difference between revisions of "DataBlock Display Editor"

From dataZoa Wiki
Jump to: navigation, search
(→‎Preview section)
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
+
{{Template:Display_Editor_Disambiguate|displayLabel=dataBlock|page=About_dataBlocks|pageLabel=dataBlocks}}
−
<div class="GOrangeBox"><div class="imgGlyph24 imgDisambiguate"></div> This section is about <i>editing</i> dataBlock displays.  Get more background on [[dataBlock|dataBlocks]] here.</div>
+
<br>
 +
{{Template:Display_Editor_Concept|displayLabel=dataBlock|pageLabel=dataBlock Displays}}
 +
<br>
 +
{{Template:Display_Editor_See_Also}}
 +
<br>
 
<br>
 
<br>
−
 
 
{{Template:Display_Editor_Heading_Name_Section}}
 
{{Template:Display_Editor_Heading_Name_Section}}
−
 
 
{{Template:Display_Editor_Heading_Tabs_Section}}
 
{{Template:Display_Editor_Heading_Tabs_Section}}
  
 +
<div class="GfakeTabGroup"><div class="GfakeTab">dataBlock Options</div><div class="GfakeTab">Re-arrange Rows</div><div class="GfakeTab">Footer</div></div>
  
−
=== Tab: <b><i>dataBlock Options</i></b> ===
+
=== Tab: <div class="GfakeTabGroup"><div class="GfakeTab">dataBlock Options</div></div> ===
 
<div>
 
<div>
 
</div>
 
</div>
−
 
+
==== Subtab: <div class="GfakeTabGroup"><div class="GfakeTab">dataBlock Settings</div></div> ====
−
==== Subtab: <b><i>dataBlock Settings</i></b> ====
+
<div style="margin: 2em; margin-left: 6em;>
−
<div>
+
 
{{Template: dataBlock Settings Tab}}
 
{{Template: dataBlock Settings Tab}}
 
</div>
 
</div>
  
−
==== Subtab: <b><i>Cell Formatting</i></b> ====
+
==== Subtab: <div class="GfakeTabGroup"><div class="GfakeTab">Cell Formatting</div></div> ====
−
<div>
+
<div style="margin: 2em;">
−
Tabular displays have highly refined formatting options. Read about the [[Display Editor Cell Formatting Tab|cell formatting tab]] here.
+
Tabular displays have highly refined formatting options. Read about the [[Display Editor Cell Formatting Tab|cell formatting tab here]].
 
</div>
 
</div>
  
−
=== Tab: <b><i>Re-arrange Rows</i></b> ===
+
=== Tab: <div class="GfakeTabGroup"><div class="GfakeTab">Re-arrange Rows</div></div> ===
−
<div>
+
<div style="margin: 2em;">
 
Use this tab to re-order, drop, or add rows in a dataBlock.<br>
 
Use this tab to re-order, drop, or add rows in a dataBlock.<br>
  
 
To <b>re-order</b> rows, use the blue-arrow drag handles <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/reorder.png', title: 'Reorder drag handle', xtraStyle: ' min-height: 16px; min-width: 16px;'  }"></div></div> to move things around.<br>
 
To <b>re-order</b> rows, use the blue-arrow drag handles <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/reorder.png', title: 'Reorder drag handle', xtraStyle: ' min-height: 16px; min-width: 16px;'  }"></div></div> to move things around.<br>
  
−
To <b>drop</b> rows, click on their red X <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/erase.png', title: 'Drop button', xtraStyle: ' min-height: 16px; min-width: 16px;'  }"></div></div> buttons.<br>
+
To <b>drop</b> rows, click on their red <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/erase.png', title: 'Drop button', xtraStyle: ' min-height: 16px; min-width: 16px;'  }"></div></div> buttons.<br>
  
−
To <b>add</b> rows, begin in the [[Workbench]].  Before you invoke the editor, check mark the rows you would like to add.  Use the <b><i>dataBlock...</i></b> button and select the display to edit.  In the <b><i>Re-Arrange Rows</i></b> tab, use the green "+" button <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/add.gif', title: 'Add button', xtraStyle: ' min-height: 24px; min-width: 24px;'  }"></div></div> to add the checked rows to the display.<br>
+
To <b>add</b> rows, you must begin in the [[Workbench]].  First check mark the rows you would like to add, then use the <b><i>dataBlock...</i></b> button and select the display to edit.  This puts you back in the display editor where, in the <b><i>Re-Arrange Rows</i></b> tab, you use the green "+" button <div class="imgWholeWrap1"><div class="imgWhole " data-guts="{ url: '/img/add.gif', title: 'Add button', xtraStyle: ' min-height: 24px; min-width: 24px;'  }"></div></div> to add the checked rows to the display.<br>
  
 
At any point, you can use the <b><i>Apply Order</i></b> button to show a preview of your changes.
 
At any point, you can use the <b><i>Apply Order</i></b> button to show a preview of your changes.
 
   
 
   
 
</div>
 
</div>
−
 
+
{{Template:Display_Editor_Header_Tab_Footer}}
−
=== Tab: <b><i>Footer</i></b> ===
+
−
<div>
+
−
Display footers can have automatic attributions, citations, and more.  Read about the [[Display Editor Footer Tab|footer tab]] here.
+
−
</div>
+
−
 
+
 
{{Template:Display_Editor_Header_Preview_Section}}
 
{{Template:Display_Editor_Header_Preview_Section}}
−
== <b>Preview</b> section ==
+
{{Template:Display_Editor_Page_Categories}}
−
<div>
+
−
The preview section shows your display with all edits right as they are made.  Read about the [[Display Editor Preview Section|preview section]] here.
+
−
</div>
+
−
 
+
−
[[Category:Displays]][[Category:Editing]][[Category:Intermediate]]
+

Latest revision as of 16:16, 22 February 2017

 This section is about editing dataBlock displays. Get more background on dataBlocks here. 


dataBlock displays are easy to make, and they start out with sensible defaults for colors, styles, and such.
That said, you can use the dataBlock Editor to add a huge variety of features, details, and nuance as you see fit.


See also:   Create   Copy   Circulate   Publish   for Displays

Name section

The Name section is the top few lines of the display editor panel.

It is used to Name, Copy, Save and Delete your Displays. Read more about the display editor name section.

Tabs section

The middle part of the editor panel holds tabs with content and formatting options.

These tabs have a natural progression to them, moving from left to right. That is, you typically select your Data, then stylistic Settings, and so forth. That being said, you can always move freely between tabs.


Use the Preview tab to see exactly how your Widget looks at any point.


dataBlock Options
Re-arrange Rows
Footer

Tab:
dataBlock Options

Subtab:
dataBlock Settings

FieldDescriptionExample
Table TitleReplaces default title in top-left cornerTomato Production (000s)
Columns to ShowNumber of data columns to show before scrolling
Row Labels: Link to ChartRow titles become click-able for a popup chart
Row Labels: Hover NotesShow additional information when hovering on a series title

Subtab:
Cell Formatting

Tabular displays have highly refined formatting options. Read about the cell formatting tab here.

Tab:
Re-arrange Rows

Use this tab to re-order, drop, or add rows in a dataBlock.

To re-order rows, use the blue-arrow drag handles
to move things around.
To drop rows, click on their red
buttons.
To add rows, you must begin in the Workbench. First check mark the rows you would like to add, then use the dataBlock... button and select the display to edit. This puts you back in the display editor where, in the Re-Arrange Rows tab, you use the green "+" button
to add the checked rows to the display.

At any point, you can use the Apply Order button to show a preview of your changes.

Tab:
Footer

Display footers can have automatic attributions, citations, and more. Read about the footer tab here.

Preview section

As you edit your display, your changes are reflected immediately in the Preview Section. Read about the preview section here.

Retrieved from "https://docwiki.datazoa.com/index.php?title=DataBlock_Display_Editor&oldid=3327"