Tip:
Highlight text to annotate it
X
Maintaining databases could involve keeping track of employees
or customers, presenting products or store locations, or handling just
about any structured data you can imagine, actually.
Tangora's database list module gives you extraordinary power over the
potentially large amounts of data in an easy-to-use interface.
We'll be covering our discussion of database lists in two videos
and we'll also be integrating some cool features along the way.
In this video, we'll be creating a database page based on
an existing database to show presenters for a conference
whose site we've been building. And we're also going to be
integrating Tangora's lightbox functionality in the process.
All right, here's the finished setup of the page that we'll be creating
in this video.
There are a some speakers listed here, some search options
and I can click on a read-more link to get details on the speaker
which I've configured to open in a lightbox.
Okay, back in Tangora Manager, the first thing that I'd actually
like to do here is to show you the data in the modules area
so I'll go to 'modules > database lists' and then select the list
'presenters'. Once I've clicked in here, we can see an overview of
all the presenters for our conference. At the moment
we have two. Additional speakers can be created by hitting the
'create' button. If I click on one of our presenters, we can see
the fields that have been created, and I can navigate back to
the overview by clicking on the bread-crumb path up here at the top.
Well so, there's the data we want to present on our site.
And to do so, we'll have to create a database list page. So I'll
navigate to the 'pages' area over to our page called 'Program' where
I already happen to have the page 'presenters' as a sub page.
And then I'll right click, choose 'properties' and change our
page type to 'database'. And then I'll click 'ok'.
So then I'll click on settings, and I'll choose the relevant
database list 'presenters' and hit 'okay'. Now I'm brought to
the database list page settings with four tabs. Here's a quick low-down
we'll go more in depth along the way. Under 'content' we decide
what we show, that is do we want to show all our data, or only
a selection of our data. On the 'overview' and 'details' tabs
we setup our display for all of our data items as they're respectively
displayed grouped together and, optionally, as viewed individually.
Filtering is where I can set up navigation and search options
for my user.
In the current case, we always want to show all presenters, so for now
I'm just going to stick with the default values under 'content'.
But we have the task now of creating a layout for our overview
where we'll see a list over all our speakers, and our details, where we
have a view that focuses on one presenter at a time.
So now we've set the stage. We've created our database list page
and selected the database list we'd like to use, as well as what content
from that list we'd like to show.
Now, we'll get down to creating a layout for our overview
and details.
So under the 'overview' tab, I'll select by 'view mode' the choice
'block list', which will enable me to use Visual Designer, and then
I'll hit 'Edit layout' which will bring me directly to
Visual Designer. If you experience that you come into our older tool
'Table designer', which I'll quickly hop over to now, you'll be able
to change over our Visual Designer using this button here
and Visual Designer can also be set to your default design tool
under the Administration area.
Before we start, I want to ensure that the width of my current layout
is compatible with the page and site layouts into which this
module layout will be displayed in. Fortunately, there's a really easy
way to do this if you're too busy or too lazy to calculate
the pixel widths. Just as I executed for my page layouts earlier, I'll go
to the Tangora button under 'properties', and then I'll choose
'layout version > 2.0', which then allows me to go to my
'layout' tab here, and create a page width in percentages.
So I'll just use 100%.
Job done.
Right, so we could run a wizard here actually, as we've demonstrated
in our video on form pages, if we wanted a little bit of help
getting the fields on the page, but this is probably not as relevant
in the context of a database list page, because, well
you oftentimes want to omit the headers.
We're going to approach the task simply by dragging the fields
one by one, because here we also have a little more complexity
in the layout that we're going to create.
Hopping back to our finished example, we can see that we want
a small image in a left-hand column, and then a headline, name
and short text and link to further information. So actually
the first thing I want to do is create a column structure
which I do by choosing 'insert > columns' and choosing
a two-column set. Then I can take a hold of my left-hand column
and insert the small image. Then I can adjust the left hand column
so it fits just around the image.
But the right hand column remains the same size as we can see here.
Well, we actually want it to just fill the remainder of
the space here, so what we'll do, is that I'll select that half
of the column set, and then I'll go to
'columns > formatting > width', and choose 100%.
Now if I drag the slider to preview how this will appear in
the various widths, you can see the effect we've achieved here.
There is no variable width in the final result, because our
site design has a fixed width, so what this in effect means
is that the width of the right-hand column
will just be set automatically.
In the right hand column, I'll place the other relevant fields.
Now what I need to do is to adjust the typographies and space
around the fields. If I select a field, there is an option which
appears under 'merge field > formatting' called 'field settings'.
If I click on this, I get an interface where I can tweak
the display, including 'typography' here, which we'll set to
'sectionheader'. I'll give the headline a header two,
or an 'h2' value
and 'name' an 'h3' value.
You may recall that we set the pages overriding headline to an 'h1'.
I won't go into too much depth here, but these are html tags that
indicate that indicate to browsers, and subsequently search engines
that these are headlines. Indeed my browser is making them bold for me
and adding some space automatically.
By the way, if we go to our 'view' tab, we can see that there's
a option called 'select site layout', where we'll notice
that there may be typographies set up which alter the display of
for example, our section headers.
The default selection should be good for you, but I just wanted
to show you that setting. There's also a chance to change the
preview record, here under 'select record'.
Allrighty, I just want to add a bit of margin here around
the read-more link.
And then I actually just want to give my layout a little bit more
height, to ensure that there is enough space between my database items.
So you may need to work a little back and forth to figure out
the optimal height.
Back on my overview tab, I will notice that I have a range
of options for setting the order in which my items are displayed
and then there's an option here called 'show details by clicking'.
Now in some cases, you may want to omit the option to click to see
details, but more often than not, you'll want to present your visitors
details on a given database list item. Here I'll select
the 'read more' link which I've customized when I created
my database list. Note that you can select more than one element
by control-clicking
(that would be command clicking for you Mac users out there).
And then I have an option here called 'show details in a lightbox'
which will allow us to overlay our details where we can show
a big image of our presenters without breaking the bounds
of my site layout. We'll activate that in just a bit.
First, let's create our detail view.
I want the layout to be rather large. I have calculated
900 pixels, but you can always experiment with widths
and you'll see the result as you're working.
Then I'll add a column set and insert an image
into the left-hand column.
In the right-hand column I'll place and style the relevant fields.
I'm not going to worry about space around my layout, because I can set
that in my lightbox settings, which I'll cover next.
Now I'm going to show you how to set up your lightbox. The lightbox
technology is available in various contexts in Tangora, I'd like
to mention, and what I'm showing here is just a useful example
specific to database list page setup.
In the lightbox settings, I can select a graphic for my close
button, if I wanted to use something other than the default, and then
I have an animation option.
'Overlay' refers to the background which will obscure
the underlying content. Typically this is a dark color with
some transparency. Then there is a background color, which relates
to the box within which our featured content is located. Then we have
padding, which will create that space around my detail layout that
I mentioned earlier. And then we have width, which I'll select here
to correspond to my detail layout. The height is fine set to automatic.
And then we're done.
The last thing I want to cover in this video is navigation
and search settings. Under the content tab, we decided what portion
of our data we'd like to present.
In the current case we actually chose to show all the data, but we
could also have set requirements that our data would have
to live up to in order to be shown. This is called an internal filter
because it is something that is decided editorially by you.
Giving your visitor search possibilities within a database
is what we call external filtering, because it is allowing your visitor
to view selections of your data relevant to them. Setting up
navigation through your data goes hand-in-hand. So let's take a look.
First, a little detail: there is set by default
a little counter text here saying 'showing two items'.
That's super if you want it, but it's superfluous here.
Fortunately, it's easy to get rid of. Well, I could go here under
'overview' and create and create for my overall overview layout
an 'advanced layout', and then place each element exactly as I'd like
them to be.
And here I'd just omit 'counter text'.
It's lovely that we have the ability to make an advanced layout here
and I just wanted to have an opportunity to show that to you
but I could also take a more simple approach, simply by navigating
to the 'filtering' tab, and then deleting the 'counter text' string.
So I can do that while maintaining the default 'basic' layout.
Let's take a closer look at the filtering tab options. I have
the option here to limit the number of items shown on a given page.
We only have two presenters, but say I had 50. It might be nice to show
only 15 at a time, or whatever you'd like. The number is set here
and then you can then modify the navigation that automatically
is created to browse between the various pages.
I can quickly demonstrate that if I were to set
the maximum per page to one.
There you go.
The other thing we'll do here is build our search interface
which we may also refer to as our external filter, because it gives
our visitors the ability to filter the view, so to speak, to see just
that item or grouping of items that meets their criteria.
We want to give our visitors the ability to search after which
expertise the speaker has, and also just generally search for a name
or some keywords that might be in the presenter's biography text.
So here's the drill. I'll hit the 'edit layout' button here
and I get a layout for my filter in Visual Designer.
I'm too lazy to calculate the optimal width, so I'll just let
the system do that by converting the layout to Visual Designer 2.0
and then making the layout width 100%. A good trick.
Here, it's a good idea to use a template, so I can position my
field headers. What we're creating here is actually a form built into
the database module. With my newly created template selected, I'll then
set in the fields people can search in.
Here, I'll place my 'expertise' category,
but I'll use the systems built in 'search word' field to allow the
guest to search in the rest of the content. And then I'll also place
a 'show' button.
Now I need to format the template. I'll go to template formatting
and choose a style from the library here. Remember that you can save
your own template formatting to the layouts, which will reduce
your workload significantly.
But the problem is here that I want to have all of my fields on
one line. I'll do this by removing line breaks. And this I do by going
to the 'view' tab and selecting 'show linebreaks', and then I can
click off the template, and then one by one I'll just axe
the undesired line breaks.
Now I'll just adjust the position of the 'show' button.
Okay, next I want to adjust the width of my search fields.
Et voilĂ .
So we've just gone through a basic database list page setup
and added a little flourish
by using Tangoras built-in lightbox functionality.
In the next video, we'll be expanding upon the basic setup
looking at a bit more complexity in our layout, specifically in
conjunction with multiple columns, focus features
and integrating image rotators in you layout.