plainblack.com
Username Password
search
Bookmark and Share

Making a News Brief with Collaboration Systems

The Collaboration System is a commonly used asset in WebGUI. Most people think of it as a type of a forum, allowing visitors to have discussions. In reality, it can be used for much more than that. In this chapter, a news brief Collaboration System will be created, and the next chapter looks at how to create a Thumbnail Preview gallery.

 

Redefining the Collaboration System (CS)

 

As mentioned earlier, the Collaboration System is often thought of as merely a forum, a place where people go to chit chat, submit bug reports or ask for technical support. The main idea behind them is the idea of collaborating, and that doesn't necessarily mean talking about the latest episode of Lost, or asking someone for help with your browser's cache.

 

What it does mean, is that many people can contribute something to one area and they don't even need to be a registered user to WebGUI, let alone a Content Manager or an Admin. This is an extremely powerful function, and as long as you're careful in creating your template you can do some really fun things.

 

Collaboration System (CS) Templates

 

To approach a situation like this, you need to think of the tools that come with a CS. The CS comes in four pieces, and each one has a template category assigned to it.

     

     

    • Search Template

    User's are able to search through the posts within one particular collaboration system, and this template controls what the search box and the search results will look like.

     

    • Post Form Template

    When a user is contributing something to your forum, this is the form that they use to submit something. Depending on what your CS is being used for, you may want to heavily customize this form, especially if you have new fields you want to add.

     

    • Thread Template

    This is the template that controls the look of what was submitted using the Post Form Template. It's also where users typically could reply to the original post.

     

    • Collaboration System Template

    This is what holds all of the Threads in a CS. This can be heavily modified to suit a variety of needs, and in the later examples you'll see this.

     

     

    Collaboration System (CS) Security

     

    Another feature that will give you great flexibility is the CS's security settings. You can have any old registered user post to your CS, a complete stranger, or maybe only a handful of people. With the security settings, you can determine who can post and who can view.

     

    Collaboration System Settings

     

    This may seem obvious, but there are certain settings in every Collaboration System that can heavily dictate how it's going to work. Some of them seem innocuous, but a simple radio button or text field can make your CS behave in radically different (and good!) ways.

     

    • Attachments Per Post: This field is set to zero by default, but by putting in any other numerical value you've just allowed people to upload files to your CS.

     

     

     

    • Allow Replies: You can actually set your CS to not allow anyone to reply to a thread. This means that once someone submits something, no one can respond to that submission. This is incredibly useful, and that feature will be used in all of these examples.

     

    • Edit Timeout: You can set a point in which posters can no longer edit their posts. With the way Internet and technology work, if you set a high enough value here, you're basically putting no expiration date. How many websites do you know will exist for another 99 years?

     

     

    News Brief Collaboration System (CS)

     

    It can be pretty time consuming running a website, and people often get tired of being the only ones who can update their sites. Sure, they could have given one of their friends Content Manger access to the site, but sometimes all people really want is someone to post news bulletins to the front page.

     

    This is where Collaboration Systems come in. People can submit content to a website without knowing anything about WebGUI. But to really accomplish this, templates may need to be customized.

     

     

    Analyzing What You Need

     

    To make a news brief collaboration system all that is really needed is to create a Collaboration System Template. Threads or Searches aren't really needed, and the default Post Form works just fine. With that in mind, the project just became a lot simpler.

     

    Start to take a look at the template code in sections, starting with the wrapper and default tags, then more of the custom work.

     

    The Wrapper and Defaults

     

     

    <div class="exampleNews">

    <a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

     

    <tmpl_if session.var.adminOn>

    <tmpl_var controls>

    </tmpl_if>

     

    <tmpl_if displayTitle>

    <h2><tmpl_var title></h2>

    </tmpl_if>

     

    <tmpl_if description>

    <tmpl_var description>

    </tmpl_if>

    </div>

     

     

    There's not much point to go into great detail with this, as you'll see very similar code blocks throughout this book, and for that matter within almost any WebGUI template.

     

    • line 1 : This is the wrapper. Everything that is part of this template is going to be held within these div tags.

     

    • lines 4-6 : This is an if statement that determines whether or not you should show the controls for this object if Admin mode is turned on.

     

    • lines 7-9 : If you have marked the CS to show its title, this IF statement is what would show it.

       

    • lines 10-12 : If you had entered anything into the “Description” field in your CS, this IF statement determines whether or not to show it. As long as nothing is entered in that field, nothing will be displayed.

     

    None of these are essential for the template to work, so don't feel like you absolutely have to include them. In general, it's a good idea to, especially the test to see if Admin mode is on or not. There are times where you may wonder why your title isn't showing up when someone else is using your template, only to discover that you left out that test. Get familiar and comfortable with putting these lines into your templates.

     

    The next block of code is the CS controls.

     

    CS Controls

     

     

    <div class=”exampleNews”>

    ...

     

    1 <p style="text-align:right;margin-top:1px;">

    2 <tmpl_if user.canPost>

    3 <a href="<tmpl_var add.url>">

    4 <tmpl_var add.label>

    5 </a> &bull;

    6 </tmpl_if>

    7 <tmpl_unless user.isVisitor>

    8 <tmpl_if user.isSubscribed>

    9 <a href="<tmpl_var unsubscribe.url>">

    10 <tmpl_var unsubscribe.label>

    11 </a>

    12 <tmpl_else>

    13 <a href="<tmpl_var subscribe.url>">

    14 <tmpl_var subscribe.label></a>

    15 </tmpl_if>

    16 <tmpl_if pagination.pageCount.isMultiple>

    17 &bull;

    18 </tmpl_if>

    19 </tmpl_unless>

    20 <tmpl_if pagination.pageCount.isMultiple>

    21 <a href="<tmpl_var search.url>">

    22 <tmpl_var search.label>

    23 </a>

    24 </tmpl_if>

    25 </p>

     

    ...

    </div>

     

     

    This is what controls the user's ability to add posts (if they have the rights to do that), subscribe to posts, or to search through them. Here's a more detailed look.

     

    • lines 1 and 25 : This is a paragraph tag that is holding all of the controls. Not much to say here; you'll see there are a few inline styles to give it a slight margin and to align the text to the right.

    • lines 2-6 : This is an important IF statement. It's checking to see whether or not the person is logged in. If the person is, and the person has rights to post, the add link will be displayed.

    • lines 7-19 : First there is a test to see whether or not the person visiting the CS is a visitor. If it isn't there is a sort of toggle that is displayed. If the user is subscribed to the thread, then a “Unsubscribe” link is shown. If the user is unsubscribed, then a “Subscribe” link is displayed. Last, there is a test to see if there are multiple pages in this forum. If there are, then a bullet is displayed using the special character &bull;

    • lines 18-24 : Another test to see if there are multiple pages to the CS. If so, a link is displayed to search the CS. The search link is used in this case because users will not actually page through the news.

     

    News Items

     

     

    <div class=”exampleNews”>

    ...

    ...

     

    1 <tmpl_loop post_loop>

    2 <div style="margin-bottom:15px;">

    3 <div>

    4 <b style="float:left;">

    5 ...

    6 </b>

    7

    8 ...

    9

    10 </div>

    11 </div>

    12 </tmpl_loop>

     

    ...

    </div>

     

     

    Here are a lot of wrapping elements. They will be gone over briefly so you know what to expect further down in the template.

     

    • lines 1 and 12 : This is the loop that will cycle through each one of the threads. Everything within this loop will happen for each thread in the CS.

    • lines 2 and 11 : This is a wrapping element for each Thread. All that has been added is a little margin to the bottom to separate each thread from one another.

    • lines 3 and 10 : These <div> tags are holding the titles for each post, as well as the controls to edit them, and also the date it was posted.

    • lines 4 and 8 : The <b> tags are holding the title and the controls to edit the post.

     

    Alright, you've got a handle on how these wrapping elements are used, now examine what's inside of them, starting with the <b> tag.

     

    Titles and Edit Controls

     

     

    <div class=”exampleNews”>

    ...

     

    1 <b style="float:left;">

    2 <tmpl_if user.isModerator>

    3 <tmpl_if session.var.adminOn>

    4 <tmpl_var controls>

    5 </tmpl_if>

    6 </tmpl_if>

    7 <tmpl_var title>

    8 <tmpl_if user.isPoster>

    9 <tmpl_unless session.var.adminOn>

    10 <a href="<tmpl_var edit.url>">

    11 <tmpl_var edit.label>

    12 </a>&nbsp;

    13 </tmpl_unless>

    14 </tmpl_if>

    15 <tmpl_if user.isModerator>

    16 <tmpl_unless user.isPoster>

    17 <tmpl_unless session.var.adminOn>

    18 <a href="<tmpl_var edit.url>">

    19 <tmpl_var edit.label>

    20 </a>

    21 </tmpl_unless>

    22 </tmpl_unless>

    23 </tmpl_if>

    24 </b>

     

    ...

    </div>

     

     

    • lines 2-6 : There is a test to see if the person working on this forum is the moderator. If the person is, then there is another test to determine if Admin mode is on. If it is, then the controls for that post are displayed.

       

    • line 7 : This is the title of the post.

     

    • lines 8-14 : If the user is the poster of this thread, and unless Admin mode is turned on, then the “Edit” link shows up. This test is in here because by default, if the post controls show up if Admin mode is on, one of those controls is a button marked “Edit.” It's redundant to have two edit links, so this streamlines it.

     

    • lines 15-23 : The code in green handles displaying the “Edit” controls if it's the POSTER who is editing the thread. If the moderator is viewing the thread, then this block is performed. It performs essentially the same function, either displaying or hiding the “Edit” link depending on whether Admin mode is on.

     

    The next section takes a step back to examine the rest of the contents of the <div> tag that is holding the <b> tags, the Date Posted.

     

    Date Posted

     

     

    <div class=”exampleNews”>

    ...

    <div>

    <b style="float:left;">

    ...

    </b>

    <i style="float:right;">

    Posted on <tmpl_var lastReply.dateSubmitted.human>

    </i>

    </div>

     

    ...

    </div>

     

     

    • A simple <i> tag is holding the date of when the post was actually submitted. It is floated to the right so that it's on the right-side of the post title, and notice that the title in the <b> tag is floated to the left. This makes it so both the title and the date are on the same line, but are aligned to different edges.

     

    Take another step backwards through the code and analyze what's between the <div style=”margin:15px”> tags, the content of the thread.

     

    Thread Content

     

     

    <div class=”exampleNews”>

    ...

    1 <div style="margin-bottom:15px;">

    2 <div>

    3 <b style="float:left;">

    4 ...

    5 </b>

    6 <i style="float:right;">

    7 Posted on

    8 <tmpl_var lastReply.dateSubmitted.human>

    9 </i>

    10 </div>

    11 <div style="clear:both;border-bottom:solid black 1px;"></div>

    12 <tmpl_if content>

    13 <tmpl_var content>

    14 <tmpl_if user.isModerator>

    15 (<a href="<tmpl_var url>">

    16 <tmpl_var status>

    17 </a>)

    18 </tmpl_if>

    19 </tmpl_if>

    20 </div>

    ...

    </div>

     

     

    • lines 11-12 : This line is needed to clear the floats above it.

    • lines 13 and 20 : This is an IF statement to see if there is any actual content in the thread. If there is content here, then the lines within it are executed.

    • line 14 : This simple template variable grabs the content of the thread and displays it.

    • line 15-19 : This IF statement checks to see if the user is a moderator. If s/he is, it displays the post's status. This is generally “Approved” unless there is a workflow in place that would require some type of approval before it shows up.

     

    And that's the final piece! All that needs to be done now is create a CS template and paste the code into it, and just like that a simple News page is created. Add in a little CSS and a few posts, and you're good to go.

     

    Conclusion

     

    Collaboration systems are full of potential when you start to think of them as a tool and not a thing unto themselves. Any time you want a user to be able to contribute to your site without actually giving them any special access, consider using a CS. They're powerful, full of features and very rewarding when your users use them.

     

    Keywords: collaboration system forum news post Templates thread

    Search | Most Popular | Recent Changes | Wiki Home
    © 2018 Plain Black Corporation | All Rights Reserved