.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ===================================== Browser Tutorial tt\_news Sample (en) ===================================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2015-04-10T00:42:06 :Classification: browser_tut_tt_news_en :Description: Publish your own data with the Browser – TYPO3 without PHP. This tutorial presents a ready-to-use example with the tt_news extension. Adapt it to your needs! You are welcome to take any other extension too. :Keywords: browser, TYPO3 without PHP, templating, sample, tt_news :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| Browser Tutorial tt\_news Sample (en) (extkey: browser\_tut\_tt\_news\_en) |img-3| .. _Browser-Tutorial-tt-news-Sample-en: Browser Tutorial tt\_news Sample (en) ===================================== **Browser – TYPO3 without PHP** Publish your own data with the Browser – TYPO3 without PHP. This tutorial presents a ready-to-use example with the tt\_news extension. Adapt it to your needs! You are welcome to take any other extension too. |img-4| Version: 7.0.7, 2015-04-09 Extension Key: browser\_tut\_tt\_news\_en Language: en Keywords: browser, TYPO3 without PHP, templating, sample, tt\_news Copyright 2010-2015, Dirk Wildt, Die Netzmacher, This document is published under the Open Content License available from `http://www.opencontent.org/opl.shtml `_ The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from `www.typo3.org `_ .. _Table-of-Contents: Table of Contents ----------------- `Browser Tutorial tt\_news Sample (en) 1 <#__RefHeading__24238_633547889>`_ `Introduction 3 <#__RefHeading__25279_510247921>`_ `What does it do? 3 <#__RefHeading__10947_182679940>`_ `What do you need? 3 <#__RefHeading__10949_182679940>`_ `Further Information 3 <#__RefHeading__38403_1116738509>`_ `Quick Installation 4 <#__RefHeading__10973_182679940>`_ `Extension Manager 4 <#__RefHeading__10975_182679940>`_ `Tutorial 5 <#__RefHeading__10985_182679940>`_ `What do you need? 5 <#__RefHeading__33913_1116738509>`_ `Add Page, Browser Plugin and Template 5 <#__RefHeading__38342920>`_ `Configuring 5 <#__RefHeading__33917_1116738509>`_ `Result in the Frontend 7 <#__RefHeading__28171_510247921>`_ `Change some properties in the Flexform of the Plugin 8 <#__RefHeading__33921_1116738509>`_ `TypoScript 9 <#__RefHeading__38407_1116738509>`_ `File structure 9 <#__RefHeading__28173_510247921>`_ `List View 9 <#__RefHeading__28175_510247921>`_ `Single View 13 <#__RefHeading__28177_510247921>`_ `Helpful suggestions 15 <#__RefHeading__26524_510247921>`_ `Change Log 16 <#__RefHeading__16763_510247921>`_ `Illustration Index 17 <#__RefHeading__7879_1359502716>`_ `Alphabetical Index 18 <#__RefHeading__14691_1458450892>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - The Browser Tutorial tt\_news Sample (en) is a Quick Start tutorial for the Browser – TYPO3 without PHP. - It presents, how to publish any own data with the Browser – TYPO3 without PHP. - The example with tt\_news is ready-to-use. - It should be easy to adapt it to your own needs. .. _What-do-you-need: What do you need? ^^^^^^^^^^^^^^^^^ - A little experience in TypoScript. - The extension tt\_news and some news records. .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: This tutorial in PDF format """"""""""""""""""""""""""" You find this tutorial as a PDF file at - doc/manual.pdf - `http://typo3-browser.de/typo3conf/ext/browser\_tut\_tt\_news\_en/doc/ manual.pdf `_ .. _Browser-Manual: Browser Manual """""""""""""" Manual: The Browser has it's own manual (with the reference of course). - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Quick-Installation: Quick Installation ------------------ .. _Extension-Manager: Extension Manager ^^^^^^^^^^^^^^^^^ Open the extension manager, download the extension Browser (extkey: browser) and install it. If you haven't installed the extension tt\_news, please install it too. .. _Tutorial: Tutorial -------- .. _What-do-you-need: What do you need? ^^^^^^^^^^^^^^^^^ This is a trial with tt\_news. You need: - an installed tt\_news and - some tt\_news records .. _Add-Page-Browser-Plugin-and-Template: Add Page, Browser Plugin and Template ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-5| Add a page to your page tree.Call it "Browser Sample II". Add the Browser plugin to the page.Call it "[Browser Sample II]".Set the header type to: [hidden].Configure the other properties later (see below). Add an extension template to your page.Call it in the format "type \_name-of-your-page\_uid-of-yourTypoScript-template".Here: "+page\_browsersample2\_1023" .. _Configuring: Configuring ^^^^^^^^^^^ .. _Template: Template """""""" Configure the extension template. Here: +page\_browsersample2\_1023 .. _Includes: [Includes] ~~~~~~~~~~ Add in the tab [Includes] into the field "Include static (from extensions):" the three templates: - Browser [1] Basis (browser) - Browser [1] + pageBrowser Wrap v4.9 (browser) `:sup:`0` <#sdfootnote1sym>`_ - Browser [3] + Sample for tt\_news (browser) .. _Browser-Plugin-Flexform: Browser Plugin / Flexform """"""""""""""""""""""""" .. _Behaviour: [Behaviour] ~~~~~~~~~~~ Browser plugin tab [Behaviour] Field "Record Storage Page": the folder wirh your news. Here: "News (tt\_news)" Recursive: [Infinite] |img-5| .. _Plugin-List-View: [Plugin] > [List View] ~~~~~~~~~~~~~~~~~~~~~~ Browser plugin tab [List View] Title: Browser Sample II |img-5| .. _Result-in-the-Frontend: Result in the Frontend ^^^^^^^^^^^^^^^^^^^^^^ |img-5| |img-5| The result depends on the corporate design of your website. .. _Change-some-properties-in-the-Flexform-of-the-Plugin: Change some properties in the Flexform of the Plugin ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We like to change some stuff in the frontend. We like to disable - the index browser - the page browser and - the search form .. _Tab-List-Views: Tab [List Views] """""""""""""""" - Navigation: Disable - [ ] Index Browser - [ ] Page Browser - Select box "Search": [configured] - Check box "Search: Form": Disable "Display the form" .. _Result-in-the-Frontend: Result in the Frontend """""""""""""""""""""" |img-5| |img-5| .. _TypoScript: TypoScript ---------- .. _File-structure: File structure ^^^^^^^^^^^^^^ Configuration/TypoScript/samples/tt\_news tt\_news ├── constants.txt ├── list │ ├── filter.ts │ ├── htmlSnippets.ts │ ├── setup.ts │ ├── sql.ts │ └── tableFields.ts ├── locallang.ts ├── setup.txt └── single ├── setup.ts ├── sql.ts └── tableFields.ts .. _List-View: List View ^^^^^^^^^ .. _General: General """"""" Configuration/TypoScript/samples/tt\_news/list/setup.ts plugin.tx\_browser\_pi1 { views { list { 1000 = tt\_news: Sample 1000 { // [String] Name of the view. It will displayed in the plugin/flexform name = tt\_news: Sample // [String] Alias for showUid. showUid = {$plugin.tx\_browser\_pi1.navigation.showUid} } } } } All values are configured by the Constant Editor, which are beginning with "{$plugin. tx\_browser\_pi1. ..." See the configuration of the showUid at Constant Editor > Category: [BROWSER - NAVIGATION (3)] File: Configuration/TypoScript/samples/tt\_news/constants.txt .. _SQL: SQL """ Configuration/TypoScript/samples/tt\_news/list/sql.ts plugin.tx\_browser\_pi1 { views { list { 1000 { // [String] Select clause (don't confuse it with the SQL select) select ( tt\_news.title, tt\_news\_cat.title, tt\_news.datetime, tt\_news.ext\_url, tt\_news.image, tt\_news.imagealttext, tt\_news.imagetitletext, tt\_news.page, tt\_news.short, tt\_news.type ) // Order of the records orderBy ( tt\_news.datetime DESC, tt\_news\_cat.title, tt\_news.title ) // Don't link any field automatically with the link to the single view csvLinkToSingleView = dummy functions { clean\_up { // Don't display fields as columns in the table csvTableFields ( distance, tt\_news.ext\_url, tt\_news.page, tt\_news.type, tt\_news\_cat.title ) } } } } } } .. _Filter: Filter """""" Configuration/TypoScript/samples/tt\_news/list/filter.ts plugin.tx\_browser\_pi1 { views { list { 1000 { filter { tt\_news { datetime < plugin.tx\_browser\_pi1.displayList.master\_templates.category\_menu datetime { first\_item { cObject { 20 { data > value = Year lang { de = Jahr en = Year } } } } wrap = \| order.field = uid area < plugin.tx\_browser\_pi1.displayList.master\_templates.areas.sam ple\_period } } tt\_news\_cat { title < plugin.tx\_browser\_pi1.displayList.master\_templates.selectbox title { first\_item { cObject { 20 { data > value = Category lang { de = Kategorie en = Category } } } } wrap =
\|
} } } } } } } .. _TableFields: TableFields """"""""""" Configuration/TypoScript/samples/tt\_news/list/tableFields.ts plugin.tx\_browser\_pi1 { views { list { 1000 { tt\_news { datetime = TEXT datetime { field = tt\_news.datetime strftime { cObject = TEXT cObject { value = %m/%d/%y lang.de = %d.%m.%y } } } image < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFie lds.image.0 title < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFie lds.header.0 } } } } } image and title are configured by the Constant Editor. image and title get the properties 0, 1, 2. That enables to set a link depending on the type of a news. See the configuration at the Constant Editor > Categories [BROWSER - TEMPLATES - LIST - HEADER 0\* (4)] - [BROWSER - TEMPLATES - LIST - IMAGE 0\* (9)] - [BROWSER - TEMPLATES - LIST - URL 0\* (9)] File: Configuration/TypoScript/samples/tt\_news/constants.txt .. _HTML-snippets: HTML snippets """"""""""""" Configuration/TypoScript/samples/tt\_news/list/htmlSnippets.ts plugin.tx\_browser\_pi1 { views { list { 1000 { htmlSnippets = htmlSnippets { marker { filter = TEXT filter { value (
###TT\_NEWS\_CAT.TITLE### ###TT\_NEWS.DATETIME###
) } } } } } } } .. _Single-View: Single View ^^^^^^^^^^^ .. _General: General """"""" Configuration/TypoScript/samples/tt\_news/single/setup.ts plugin.tx\_browser\_pi1 { views { single { 1000 = tt\_news: Sample } } } .. _SQL: SQL """ Configuration/TypoScript/samples/tt\_news/single/sql.ts plugin.tx\_browser\_pi1 { views { single { 1000 = tt\_news: Sample 1000 { // [String] Select clause (don't confuse it with the SQL select) select ( tt\_news.title, tt\_news.short, tt\_news.datetime, tt\_news.bodytext, tt\_news.image, tt\_news.imagecaption, tt\_news.imagealttext, tt\_news.imagetitletext ) functions { clean\_up { // Don't display fields as columns in the table csvTableFields ( tt\_news.datetime, tt\_news.imagecaption, tt\_news.imagealttext, tt\_news.imagetitletext ) } } } } } } .. _TableFields: TableFields """"""""""" Configuration/TypoScript/samples/tt\_news/single/tableFields.ts plugin.tx\_browser\_pi1 { views { single { 1000 { tt\_news { // tt\_news.datetime - tt\_news.bodytext bodytext = COA bodytext { // tt\_news.datetime 10 = TEXT 10 { field = tt\_news.datetime strftime { cObject = TEXT cObject { value = %m/%d/%y lang.de = %d.%m.%y } } } // devider: – 20 = TEXT 20 { value = – noTrimWrap = \| \| \| } // tt\_news.bodytext 30 = TEXT 30 { field = tt\_news.bodytext } stdWrap { parseFunc < lib.parseFunc\_RTE } } image < plugin.tx\_browser\_pi1.displaySingle.master\_templates.tableF ields.image.0 } } } } } image is configured by the Constant Editor. See the configuration at the Constant Editor > Categories [BROWSER - TEMPLATES - LIST - IMAGE 0\* (9)] File: Configuration/TypoScript/samples/tt\_news/constants.txt .. _Helpful-suggestions: Helpful suggestions ------------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Forum: Forum """"" If you have helpful suggestions, feel free to publish any question, bug or code snippet on `http://typo3-browser-forum.de/ `_ Posts are welcome in English and German. .. _New-Features-and-Bug-Reports: New Features and Bug Reports """""""""""""""""""""""""""" You are welcome to post any question, bug or code snippet on TYPO3 forge.Here you find feature announcements and bug reports.See `http://forge.typo3.org/projects/show/extension-browser `_ .. _Change-Log: Change Log ---------- 7.0.7 **Feature** \* #i0155: link management: tt\_news types 0, 1, and 2 are respected **Improvement** Proper Manual 7.0.6 **Update** Browser 6.x/7.x, TYPO3 6.x 3.5.0 **Publishing** Initial release .. _Illustration-Index: Illustration Index ------------------ Illustration 1: The page "Browser Sample II" with the Browser plugin and an extension template 5 Illustration 2: Browser plugin tab [Behaviour] 6 Illustration 3: Browser plugin tab [Plugin] > [List View] 6 Illustration 4: List view 7 Illustration 5: Single view 7 Illustration 6: List view with the search form, filter and both browsers 8 Illustration 7: List view without the search form, the filter and both browsers 8 .. _Alphabetical-Index: Alphabetical Index ------------------ `0 <#sdfootnote1anc>`_ Optional: Needed only, if you like the HTML wrap of the Browser 4.x for the page browser. 18 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: Grafik2 .. :name: Grafik2 .. :width: 69 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics1 .. :name: graphics1 .. :width: 18 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics6 .. :name: graphics6 .. :width: 302 .. |img-5| image:: data: :alt: Frame39 .. :align: bottom .. :id: Frame39 .. :name: Frame39