Follow Sebastiaan de Jonge on Twitter
Sebastiaan de Jonge
  1. path:/ Sebastiaan de Jonge
  2. arrow Blog
  3. arrow posts
  4. arrow Cool TypoScript: Display any record

Blog

4Feb

Cool TypoScript: Display any record

Posted on February 4, 2010 in TypoScript by Sebastiaan de Jonge

TypoScript can be so useful sometimes! In this example I will display how we can create a nice output of any record in the front-end. And all this without the use of any silly extension.


Explaining the situation and the problem

As easy as some extensions are to be installed, they don't always fit your needs. Today I was working on a problem which came up when I wasn't able to index records user the crawler and indexed_search. There was a small list of front-end users that was displayed, with detailed/single views. The problem was that in this website the extension gsi_feusers_list was used. Which is pretty old, nasty and there was no real possibility to get it indexed. This was partially due to some caching issues, but I will save you the details. ;-)

My solution

I chose to recreate the single view with just TypoScript, and I had my reasons for that! First of all, I was not in the mood to rewrite the entire user listing extension or to look for an alternative and reconfigure it. Second, because it took me less than 1 hour to fully create it. And third, because it's possible! :-)

Getting started

First of all I had to take a look at the original content, it was build up in the following order:

  • Header (name)
  • Image (user image)
  • Introduction (description)
  • Back link

Not so complicated! So I initially started with the template layout, and on the original it looked somewhat like this:

The template layout 
  1. <h1>John Doe</h1>
  2. <div class="imageWrapper">
  3.     <img src="typo3temp/pics/757418ec34.png" alt="" title="" />
  4. </div>
  5. <p class="bodytext">
  6.     A small story about John..
  7. </p>
  8. <p class="bodytext">
  9.     A little about his family...
  10. </p>
  11. <p class="bodytext">
  12.     And something about his professional career
  13. </p>
  14. <p>
  15.     <a href="overview.html">&laquo; back</a>
  16. </p>
<h1>John Doe</h1>
<div class="imageWrapper">
    <img src="typo3temp/pics/757418ec34.png" alt="" title="" />
</div>
<p class="bodytext">
    A small story about John..
</p>
<p class="bodytext">
    A little about his family...
</p>
<p class="bodytext">
    And something about his professional career
</p>
<p>
    <a href="overview.html">&laquo; back</a>
</p>

I converted this to the following TypoScript (just the setup, no data yet).

The resulting TypoScript 
  1. temp.fe_users.singleView = CONTENT
  2. temp.fe_users.singleView {
  3.     renderObj = COA
  4.     renderObj {
  5.         ## The header
  6.         10 = HTML
  7.         10.value.wrap = <h1>|</h1>
  8.        
  9.         ## The image
  10.         20 = IMAGE
  11.         20.stdWrap.wrap = <div class="imageWrapper">|</div>
  12.        
  13.         ## The description
  14.         30 = HTML
  15.        
  16.         ## The back link
  17.         40 = HTML
  18.         40.value.wrap = <p>|</p>
  19.     }
  20. }
temp.fe_users.singleView = CONTENT
temp.fe_users.singleView {
    renderObj = COA
    renderObj {
        ## The header
        10 = HTML
        10.value.wrap = <h1>|</h1>

        ## The image
        20 = IMAGE
        20.stdWrap.wrap = <div class="imageWrapper">|</div>

        ## The description
        30 = HTML

        ## The back link
        40 = HTML
        40.value.wrap = <p>|</p>
    }
}

Getting the record data

The next step is to load the data into the CONTENT object. We do this with the following code:

Getting the record 
  1. lib.fe_users.singleView = CONTENT
  2. lib.fe_users.singleView {
  3.   table = fe_users
  4.   select {
  5.     pidInList = 11
  6.     orderBy = name ASC
  7.     andWhere.wrap = uid = |
  8.     andWhere.data = GPvar:tx_gsifeuserlist_pi1|showUid
  9.     andWhere.intval = 1
  10.   }
  11. }
lib.fe_users.singleView = CONTENT
lib.fe_users.singleView {
  table = fe_users
  select {
    pidInList = 11
    orderBy = name ASC
    andWhere.wrap = uid = |
    andWhere.data = GPvar:tx_gsifeuserlist_pi1|showUid
    andWhere.intval = 1
  }
}

So we are selecting everything from the fe_users table, with PID equals 11 and uid equals the id set in the querystring. We also put an intval = 1 at the andWhere statement to prevent SQL injections.

Now that we have the right data available, we just have to put into the data that is outputted. We will go by them, one by one.

Adding the record

We will start off with the header, in this spot we are going to display the users name. So this is what we do.

Adding field data 
  1.     10 = HTML
  2.     10 {
  3.         value.field = name
  4.         value.wrap = <h1>|</h1>
  5.     }
    10 = HTML
    10 {
        value.field = name
        value.wrap = <h1>|</h1>
    }

It's as simple as that! Next comes the image, this will be a little more configurations. Simply because we don't want the image to be bigger than let's say.. 170 pixels.  Notice also that the path has to be set correctly! In my case the images were added with sr_feuser_register, and thus stored here. But this might be different. To check this you may simply check the uploads folder or the extension you are using to upload the images.

Adding and rendering an image 
  1.     20 = IMAGE
  2.     20 {
  3.         file.import=uploads/tx_srfeuserregister/
  4.         file.import.field = image
  5.         file.maxH = 170
  6.         file.maxW = 170
  7.         wrap = <div class="imageWrapper">|</div>
  8.     }
    20 = IMAGE
    20 {
        file.import=uploads/tx_srfeuserregister/
        file.import.field = image
        file.maxH = 170
        file.maxW = 170
        wrap = <div class="imageWrapper">|</div>
    }

It all looks a lot more difficult than it actually is! :-) Next step the description text. This was taken from an extended field from the fe_users table. Also notice that we user the parseFunc_RTE to render this RTE field properly!

Rendering an RTE field with TypoScript 
  1.     30 = HTML
  2.     30.value.field = tx_myextension_description
  3.     30.value.parseFunc < lib.parseFunc_RTE
    30 = HTML
    30.value.field = tx_myextension_description
    30.value.parseFunc < lib.parseFunc_RTE

Finally we finish of with setting the back link. In this case we are linking to a static page (45) containing the user overview.

Creating a link with TypoScript's typolink function 
  1.     40 = HTML
  2.     40.value = &laquo; Back
  3.     40.value.typolink.parameter = 45
  4.     40.value.wrap = <p>|</p>
    40 = HTML
    40.value = &laquo; Back
    40.value.typolink.parameter = 45
    40.value.wrap = <p>|</p>

That's it! All together we have now come up with the following TypoScript:

The Result 
  1. temp.fe_users.singleView = CONTENT
  2. temp.fe_users.singleView {
  3.     ## Fetching the data
  4.     table = fe_users
  5.     select {
  6.         pidInList = 11
  7.         orderBy = name ASC
  8.         andWhere.wrap = uid = |
  9.         andWhere.data = GPvar:tx_gsifeuserlist_pi1|showUid
  10.         ## Prevent SQL injections
  11.         andWhere.intval = 1
  12.     }
  13.    
  14.     ## Rendering the output
  15.     renderObj = COA
  16.     renderObj {
  17.         ## The header
  18.         10 = HTML
  19.         10 {
  20.             value.field = name
  21.             value.wrap = <h1>|</h1>
  22.         }
  23.        
  24.         ## The image
  25.         20 = IMAGE
  26.         20 {
  27.             file.import=uploads/tx_srfeuserregister/
  28.             file.import.field = image
  29.             file.maxH = 170
  30.             file.maxW = 170
  31.             wrap = <div class="imageWrapper">|</div>
  32.         }
  33.        
  34.         ## The description
  35.         30 = HTML
  36.         30.value.field = tx_myextension_description
  37.         30.value.parseFunc < lib.parseFunc_RTE
  38.        
  39.         ## The back link
  40.         40 = HTML
  41.         40.value = &laquo; Back
  42.         40.value.typolink.parameter = 45
  43.         40.value.wrap = <p>|</p>
  44.     }
  45. }
temp.fe_users.singleView = CONTENT
temp.fe_users.singleView {
    ## Fetching the data
    table = fe_users
    select {
        pidInList = 11
        orderBy = name ASC
        andWhere.wrap = uid = |
        andWhere.data = GPvar:tx_gsifeuserlist_pi1|showUid
        ## Prevent SQL injections
        andWhere.intval = 1
    }

    ## Rendering the output
    renderObj = COA
    renderObj {
        ## The header
        10 = HTML
        10 {
            value.field = name
            value.wrap = <h1>|</h1>
        }

        ## The image
        20 = IMAGE
        20 {
            file.import=uploads/tx_srfeuserregister/
            file.import.field = image
            file.maxH = 170
            file.maxW = 170
            wrap = <div class="imageWrapper">|</div>
        }

        ## The description
        30 = HTML
        30.value.field = tx_myextension_description
        30.value.parseFunc < lib.parseFunc_RTE

        ## The back link
        40 = HTML
        40.value = &laquo; Back
        40.value.typolink.parameter = 45
        40.value.wrap = <p>|</p>
    }
}

The result is the exact same as the extension outputted (in my situation at least), but it allowed me to cache and index these single pages without having to dive into this extension and get my hands really dirty ;-)


Tags: typoscriptcool typoscripttypo3displayrecordfefrontend

Comments (3)

  1. Gravatar: BenjaminSBenjaminSon February 4, 2010
    at 23:07    Reply to this comment

    cool..! is it btw possible to make your own parseFunc? I see possibilities!

    =)

  2. Gravatar: Pim BroensPim Broenson February 6, 2010
    at 16:45    Reply to this comment

    Sure you can Ben ;)

    lib.parseFunc is just some typoscript that is taken from css_styled_content I guess. So writing or overwriting your own should be no problem.

    So what possibilities and show me...

  3. Gravatar: Jacco van der PostJacco van der Poston January 12, 2012
    at 16:00    Reply to this comment

    pidInList cannot be 0

    Due to a bug in TYPO3 4.6+ pidInList cannot be 0 ..

    http://forge.typo3.org/issues/32212

    Took me some hair pulling to find that ;-)

Got something to say?

 
Notify me when someone adds another comment to this post
 

Search

Categories

Tags

Archive

Blogroll

Syndicate