.. include:: ../../Includes.txt

.. _tutorial9_extensionOverview:

==================
Extension Overview
==================

Edit the extension `sav_library_example9 
<https://extensions.typo3.org/extension/sav_library_example9>`_
in the SAV Library Kickstarter to get an overview. It contains
one form with three conventional **List**, **Single** and **Edit** views.

There is nothing special in the **List** view.

Edit View
=========

Two subforms are used to input the graph data. Even if another choice was possible
for the field **graph1**, the use of a subform makes it possible to use similar queries 
for the graph.

- The subform **graph1** is configured to allow the input of one item. It is used to
  input the number of sunny, cloudy and rainy day in the month.
- the subform **graph2** is used to enter the minimal and maximal temperature for a given day.
  Note the field attributes used to add a delete button and up and down buttons in front of 
  each item.

  ::
  
     addDelete = 1;
     addUpDown = 1;

Single View
===========

The type of the field **graph** is :ref:`Graph <savlibrarykickstarter:graph>`. 
Its configuration includes the following properties.

:: 

   cutLabel = 1;
   graphTemplate = typo3conf/ext/sav_library_example9/Resources/Private/Templates/Charts.xml;
   allowQueries = 1;
   tags = 
      marker#uidQueryGraph1 = 1,
      marker#uidQueryGraph2 = 2,
      marker#uidMainTable = ###uidMainTable###,
   ;
   
Analyze the graph template **Charts.xml** provided in the folder
**Resources/Private/Templates** of the extension.

The markers **marker#uidQueryGraph1**  and **marker#uidQueryGraph2** are used in the
definition of the query manager. You could have to modify the value 1 and 2 as explained
in the next section. The marker **marker#uidMainTable** takes the value of the current
**uid** of the main table, i.e. **tx_savlibraryexample9**. This value is always available
by means of the marker **###uidMainTable###**.

::

   <query id="graph1">
       <setQueryManager name="savcharts" uid="marker#uidQueryGraph1" uidMainTable="marker#uidMainTable" />
   </query>
   ...
   <query id="graph2">
       <setQueryManager name="savcharts" uid="marker#uidQueryGraph2" uidMainTable="marker#uidMainTable" />
   </query>

Queries
=======

Add two Sav Charts queries in backend list mode. The following caption shows the 
result with queries inserted in the **Data** folder.

.. figure:: ../../Images/Tutorial9CreateSavChartsQueries.png

Fill the query **Query Graph 1** as shown below.

.. figure:: ../../Images/Tutorial9SavChartsQuery1.png

The subforms used for the field **graph1** and **graph2** generates relations n:n. 
Therefoe, the **FROM** clause joins the tables **tx_savlibraryexample9**,
**tx_savlibraryexample9_graph1_mm** and **tx_savlibraryexample9_graph1**. 

::

   tx_savlibraryexample9
   INNER JOIN tx_savlibraryexample9_graph1_mm
       ON tx_savlibraryexample9.uid = tx_savlibraryexample9_graph1_mm.uid_local
   INNER JOIN tx_savlibraryexample9_graph1
       ON tx_savlibraryexample9_graph1_mm.uid_foreign = tx_savlibraryexample9_graph1.uid
       
The **WHERE** clause retricts the records to the one used by the **Single** view. The marker
**###uidMainTable###** does the job.

::

   tx_savlibraryexample9.uid = ###uidMainTable###
   
Fill the query **Query Graph 2** by replacing respectively
**tx_savlibraryexample9_graph1** and **tx_savlibraryexample9_graph1_mm** by
**tx_savlibraryexample9_graph2** and **tx_savlibraryexample9_graph2_mm**.

.. important::

  The uid of the Sav Charts queries should be 1 and 2. However, if you do have already enter
  other Sav Charts queries their uid will be different. You can modify the values in the
  **tags** property of the field **graph** in the **Singe** view and regenerate the extension.
  
  You may also change the configuration using the :ref:`field 
  configuration <changingTheFieldConfiguration>`, for example at the
  extension level. The following TypoScript sets the values of the
  markers **marker#uidQueryGraph1**  and **marker#uidQueryGraph2**
  respectively to 3 and 4.
  
  ::
  
     plugin.tx_savlibraryexample9_pi1.Default.singleView.fields.graph.tags (
        marker#uidQueryGraph1 = 3, 
        marker#uidQueryGraph2 = 4, 
        marker#uidMainTable = ###uidMainTable###
     )  

Enter data in the frontend as shown below.

.. figure:: ../../Images/Tutorial9FrontendInput.png

Save, and go to the frontend.

.. figure:: ../../Images/ScreenshotsExample9SingleView.png