|
7.1.2
– Content – Content Edit – Template
edit
|
|
The edit template tab is the “Master”
view of your Templates. There are two main sections, Edit templates
and Existing
Templates. The Edit Templates section simply
contains the New Template link, which allows you to create a new
template from scratch. The Existing
Templates simply gives a list of links so that you
can edit existing templates.
|
|
7.1.2a – Content – Content Edit
– Template edit – New Template
|
|
The first page you will come to after selecting
the New Template link is the Template Name. Simply enter a name for
your new template, and click on the Create New Template button,
which will bring you to the following screen:
|
|
|
|
The edit new template page has 3 main areas. It is
similar to the page edit tab in that the left hand area of the page
has 2 selectable areas, and the right hand or center area displays
the selection you make from the left hand column. Templates are complex and should only be created by an
experienced Interchange
developer. There are 4 areas all told
on the edit new template page and they are:
-
Template Attributes – This area simply
contains the Description text window in which you will put a short
description of your template.
-
Template
Controls – Allows you to add page control items such as
“Page Title” and “Members Only”. (see
Existing Template Edit example) Controls added here, must be
accounted for in the Page Layout areas, generally the top area. The
controls are created as a placeholder for parameters that the user
can select for each page.
-
For example, the control page_title, creates a
control structure, that the developer will use when creating a new
page using the UI, to identify the title of the page. To elaborate
a little further, lets say you create a control such as page_title
in the template “newtemplate”, and then place the
corresponding reference to “page_title” into a Template
area such as newtemplate_top shown in the example above. Then when
the template “newtemplate” is used to create a page,
the page_title control can be given a value. Lets say we insert the
text string “My New Page” into the value field, and
that value will be passed to the placeholder we created in
newtemplate_top. We use the term placeholder, because you can pass
not only literal values to this placeholder, but Interchange
Variables as well. So we could have passed
“__COMPANY__” which is an Interchange variable that
would display the company name.
-
In the case of Members only, some interchange code
is inserted into newtemplate_top, and a control mechanism is set up
to pass either a yes or no parameter to the code. In that case,
only a value of yes or no is needed, so the control is created as a
select box with two options, yes or no to choose
from.
To create a new control, you click on the link
Add a new control. This will bring up a selection window in
the center or right area as shown above in the example. Once a
control is created, they have some common features. Each has a name
that is a link. Click on the link to bring up the central edit
window for the control. The control that is being operated on will
have a different background color, typically gray, to distinguish
it from the other controls. Each control has a Label, or a
user-friendly name for the control. Each has a Widget type, which
displays what type of widget the control is using. Next there is a
list of Actions, delete, up, and down. The
delete link will delete the control, up will move the
display of the control up one place, and down will move the
display of the control down one place. One final common feature is
the checkbox, which will contain a check if you modify the control
from the center display window.
There are 3 selections to fill in or chose from so
we will discuss each in turn.
-
Identifier – This will be the identifier
that you will use in the template area to be a placeholder for
whatever value is selected or entered by the user when creating a
page and defining the Page
controls.
-
Label – User-friendly name to identify the
control.
-
Default Value – Example: If this was the
Page Title control, you may want to put in a value so if the user
does not select one, your pages will still have a
title.
-
Widget type – This allows the developer to
choose which type of value selector is most appropriate for the
control. For example, the Page Title control might have a text
entry type so that the user could type in whatever title they
wished, while the Members only control is really a vehicle to pass
parameters to the code within the template, so the developer may
want to limit the possible parameters available to the user to pass
to the code by using a Multiple Select type.
-
Width – Define width for text, text area,
and select boxes.
-
Height – Define height for select and text
area type widgets.
-
Options – Used in conjunction with Select or
Combo type widgets. Comma separated values, value=label format,
label is the displayed choice and value is the value passed when
label is chosen. Example, the Members only control, you want to
pass a yes or no to the code in the template, options would
be:
yes=Yes, no=No
-
Filters – Filters can be used to constrain
what types of data is entered. For example, if you want only alpha
characters in your Page title, you could select A-Za-z_0-9 as your
filter. If you are selecting from database you may use DB Lookup,
and so on.
-
Lookup select – Use this box to supply
lookup field that will be used for populating certain widget types
selected above. (Select, Combo, etc) This will be used as the look
up field if “Field for Lookup” is empty.
If you use this box, it is assumed that
you are using ONE field for lookup, and that field is in the
products table. If you want to use more than one field, or fields
from a table other than products, you must use the Field for Lookup
box.
-
Field for Lookup – Use this box to supply
lookup values that will be used for populating certain widget types
selected above. (Select, Combo, etc) Can select two fields from the
same table, separate with commas, and the second field will be used
as a Label, while the first one will be used as the value for this
selection.
-
Lookup table – Use this to select a table if
other than products is to be used. “Products” is the
default table when this table window is blank.
-
Help – This is help text that will be
displayed next to the widget. You can enter comments here that may
help the user in deciding how to use the particular
control.
-
Help URL – If a control is particularly
complex, you can provide a URL to display a more in depth
description of the control usage. Provide a full link, ie
http://www.myhelp.com/myhelppage.html
, or you can provide a page reference such as myhelppage.html, and
a url will be generated to the admin directory as in: http://demo.icdevgroup.org/i/demo1/admin/myhelppage.html
-
Prepend HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly before the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Append HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly after the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Pre_Filter – You can filter data coming from
the data field. Filters above place restrictions on data going to
the database, Pre_Filter can place restrictions on or format data
coming from the database.
The final selectable area in the Template Edit New
is the Page Layout. The Page Layout area normally contains template
areas, NAME_OF_TEMPLATE_TOP, and NAME_OF_TEMPLATE_BOTTOM. Each of
these template areas is a link, which will change; you guessed it,
the center display to show the contents of the selected area. To
begin with, all that will be shown in the Page Layout window will
be the Template area name, a checkbox “changed”, and
the words No Component. Most Interchange templates are made up of
two html pages, a Top and a Bottom. Like everything in Interchange,
flexibility is key. If you look at one of the existing templates in
Interchange, you can see that most of the HTML for the entire
template is located in the Top area, and the Bottom area pretty
much just closes things up. You can set up your template in an HTML
editor, and then transfer that in pieces, to Top and Bottom areas.
A simple trick is to create the page as you want it to appear, then
put in comments where you want to start and end each section, for
example
<!—Start top here All of your top area html here
<!—end top here<!—start bottom here All of your bottom area html
<!—end bottom here
Then simply cut and paste into the appropriate
template areas. See an example of this commenting highlighted in
blue here.
We will discuss components in the next section, but remember to
plan to make use of this powerful Interchange feature when
designing your template. A component is a somewhat self-contained
module that can be defined in Interchange, and called from within
the template. To insert a component into your template, you need to
create an area or slot for the component. You can create several
slots in different areas of your template. The nice part about it
is that you do not have to use the slot, unless you need
it.
To create a slot for a component, you will need to
plan the page out in advance. Do you want a column down the left
side of your page that you can insert components into? Do you want
to have a spot at the bottom of the page for a component or two?
You can put the slots virtually anywhere, but you need to plan your
page in advance. So the first step is to create an HTML location
for the slot. Do this by simply creating an HTML template as
mentioned earlier, but build with slots in mind. For example you
may have a table that is 3 columns wide. The first column may
contain an area for small search boxes and shopping cart
components. The second column may be quite a bit wider and contain
room for the main content of the page, and the third column may
contain an area for additional “Best seller”
components. They can be arranged in any way you
like.
Now that you have a space for a slot, you put in
the slot itself. You do this by inserting one of the
following:
-
[component group=vertical] – A vertical slot
is used where the component will be narrow, such as a left or right
column bar, and is appropriate for such things as Search Box Small,
Small cart for left/right display, Products Tree, and so
on.
-
[component group=horizontal] – A Horizontal
slot normally used above or below the main content area. In most
cases it is best to use the component group content
type.
-
[component group=content] – A Horizontal
slot normally used above or below the main content area. Many of
the components can be adjusted to use varying numbers of columns
and rows, and return a requested number of items, as with Best
Sellers. You can experiment with what works the best for your
application.
I have included an example from the Demo template
“Page with top/left areas” below, with the component
slots highlighted in yellow. Also I highlighted in
light blue an example of
the commenting technique I mentioned earlier, which helps you lay
out your template.:
Finally,
once you have finished creating your template, you need to save it.
You can do that by clicking on the OK button every time you make a
change in the center window, and then by clicking on the Publish
button when you are ready to commit your changes. Clone Template: You can easily create a new template
based on an existing template by entering a name for your new
template into the New Name window, and click on Publish. This will
create a new template based on the one you are currently working
on.
|
|
7.1.2b – Content – Content Edit
– Template edit – Existing Template
|
|
|
|
The edit existing template page has 3 main areas.
It is similar to the page edit tab in that the left hand area of
the page has 2 selectable areas, and the right hand or center area
displays the selection you make from the left hand
column. WARNING: Templates are complex and should only be
edited by an experienced Interchange
developer. There are 4 areas all told
on the edit new template page and they are:
-
Template Attributes – This area simply
contains the Description text window in which you will put a short
description of your template.
-
Template Controls – Allows you to add or
edit page control items such as “Page Title” and
“Members Only”. Controls added here, must be accounted
for in the Page Layout areas, generally the top area. The controls
are created as a placeholder for parameters that the user can
select for each page.
-
For example, the control page_title, creates a
control structure, that the developer will use when creating a new
page using the UI, to identify the title of the page. To elaborate
a little further, lets say you create a control such as page_title
in the template “leftonly”, and then place the
corresponding reference to “page_title” into a Template
area such as leftonly_top shown in the example below. Then when the
template “leftonly” is used to create a page, the
page_title control can be given a value. Lets say we insert the
text string “My New Page” into the value field, and
that value will be passed to the placeholder we created in
leftonly_top. We use the term placeholder, because you can pass not
only literal values to this placeholder, but Interchange Variables
as well. So we could have passed “__COMPANY__” which is
an Interchange variable that would display the company
name.
-
In the case of Members only, some interchange code
is inserted into leftonly_top, and a control mechanism is set up to
pass either a yes or no parameter to the code. In that case, only a
value of yes or no is needed, so the control is created as a select
box with two options, yes or no to choose from. This allows the
developer to control the user input.
To create a new control, you click on the link
Add a new control. This will bring up a selection window in
the center or right area as shown above in the example. Once a
control is created, they have some common features. Each has a name
that is a link. Click on the link to bring up the central edit
window for the control. The control that is being operated on will
have a different background color, typically gray, to distinguish
it from the other controls. Each control has a Label, or a
user-friendly name for the control. Each has a Widget type, which
displays what type of widget the control is using. Next there is a
list of Actions, delete, up, and down. The
delete link will delete the control, up will move the
display of the control up one place, and down will move the
display of the control down one place. One final common feature is
the checkbox, which will contain a check if you modify the control
from the center display window.
There are 3 selections to fill in or chose from so
we will discuss each in turn.
-
Identifier – This will be the identifier
that you will use in the template area to be a placeholder for
whatever value is selected or entered by the user when creating a
page and defining the Page
controls.
-
Label – User-friendly name to identify the
control.
-
Default Value – Example: If this was the
Page Title control, you may want to put in a value so if the user
does not select one, your pages will still have a
title.
-
Widget type – This allows the developer to
choose which type of value selector is most appropriate for the
control. For example, the Page Title control might have a text
entry type so that the user could type in whatever title they
wished, while the Members only control is really a vehicle to pass
parameters to the code within the template, so the developer may
want to limit the possible parameters available to the user to pass
to the code by using a Multiple Select type.
-
Width – Define width for text, text area,
and select boxes.
-
Height – Define height for select and text
area type widgets.
-
Options – Used in conjunction with Select or
Combo type widgets. Comma separated values, value=label format,
label is the displayed choice and value is the value passed when
label is chosen. Example, the Members only control, you want to
pass a yes or no to the code in the template, options would
be:
yes=Yes, no=No
-
Filters – Filters can be used to constrain
what types of data is entered. For example, if you want only alpha
characters in your Page title, you could select A-Za-z_0-9 as your
filter. If you are selecting from database you may use DB Lookup,
and so on.
-
Lookup select – Use this box to supply
lookup field that will be used for populating certain widget types
selected above. (Select, Combo, etc) This will be used as the look
up field if “Field for Lookup” is empty.
If you use this box, it is assumed that
you are using ONE field for lookup, and that field is in the
products table. If you want to use more than one field, or fields
from a table other than products, you must use the Field for Lookup
box.
-
Field for Lookup – Use this box to supply
lookup values that will be used for populating certain widget types
selected above. (Select, Combo, etc) Can select two fields from the
same table, separate with commas, and the second field will be used
as a Label, while the first one will be used as the value for this
selection.
-
Lookup table – Use this to select a table if
other than products is to be used. “Products” is the
default table when this table window is blank.
-
Help – This is help text that will be
displayed next to the widget. You can enter comments here that may
help the user in deciding how to use the particular
control.
-
Help URL – If a control is particularly
complex, you can provide a URL to display a more in depth
description of the control usage. Provide a full link, i.e.
http://www.myhelp.com/myhelppage.html
, or you can provide a page reference such as myhelppage.html, and
a url will be generated to the admin directory as in: http://demo.icdevgroup.org/i/demo1/admin/myhelppage.html
-
Prepend HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly before the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Append HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly after the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Pre_Filter – You can filter data coming from
the data field. Filters described above place restrictions on data
going to the database, Pre_Filter can place restrictions on or
format data coming from the database.
The final selectable area in the Template Edit
Existing Templates is the Page Layout. The Page Layout area
normally contains template areas, NAME_OF_TEMPLATE_TOP, and
NAME_OF_TEMPLATE_BOTTOM. Each of these template areas is a link,
which will change; you guessed it, the center display to show the
contents of the selected area. To begin with, all that will be
shown in the Page Layout window will be the Template area name, a
checkbox “changed”, and the words No Component. Most
Interchange templates are made up of two html pages, a Top and a
Bottom. Like everything in Interchange, flexibility is key. If you
look at one of the existing templates in Interchange, you can see
that most of the HTML for the entire template is located in the Top
area, and the Bottom area pretty much just closes things up. You
can set up your template in an HTML editor, and then transfer that
in pieces, to Top and Bottom areas. A simple trick is to create the
page as you want it to appear, then put in comments where you want
to start and end each section, for example
<!—Start top here All of your top area html here
<!—end top here<!—start bottom here All of your bottom area html
<!—end bottom here
Then simply cut and paste into the appropriate
template areas. See an example of this commenting highlighted in
blue here. We will discuss
components in the next section, but remember to plan to make use of
this powerful Interchange feature when designing your template. A
component is a somewhat self-contained module that can be defined
in Interchange, and called from within the template. To insert a
component into your template, you need to create an area or slot
for the component. You can create several slots in different areas
of your template. The nice part about it is that you do not have to
use the slot, unless you need it.
To create a slot for a component, you will need to
plan the page out in advance. Do you want a column down the left
side of your page that you can insert components into? Do you want
to have a spot at the bottom of the page for a component or two?
You can put the slots virtually anywhere, but you need to plan your
page in advance. So the first step is to create an HTML location
for the slot. Do this by simply creating an HTML template as
mentioned earlier, but build with slots in mind. For example you
may have a table that is 3 columns wide. The first column may
contain an area for small search boxes and shopping cart
components. The second column may be quite a bit wider and contain
room for the main content of the page, and the third column may
contain an area for additional “Best seller”
components. They can be arranged in any way you
like.
Now that you have a space for a slot, you put in
the slot itself. You do this by inserting one of the
following:
-
[component group=vertical] – A vertical slot
is used where the component will be narrow, such as a left or right
column bar, and is appropriate for such things as Search Box Small,
Small cart for left/right display, Products Tree, and so
on.
-
[component group=horizontal] – A Horizontal
slot normally used above or below the main content area. In most
cases it is best to use the component group content
type.
-
[component group=content] – A Horizontal
slot normally used above or below the main content area. Many of
the components can be adjusted to use varying numbers of columns
and rows, and return a requested number of items, as with Best
Sellers. You can experiment with what works the best for your
application.
I have
included an example from the Demo template “Page with
top/left areas” below, with the component slots highlighted
in yellow. Also I
highlighted in light blue
an example of the commenting technique I mentioned earlier, which
helps you lay out your template.:
Finally, once you have finished creating your
template, you need to save it. You can do that by clicking on the
OK button every time you make a change in the center window, and
then by clicking on the Publish button when you are ready to commit
your changes. You can easily create a new template based on an
existing template by entering a name for your new template into the
New Name window, and click on Publish. This will create a new
template based on the one you are currently working
on.
|
|
|
|
7.1.3
– Content – Content Edit – Component
edit
|
|
We have discussed what components
are, and where they are used, now lets see
how to create and edit one. Shown above is the main component edit
screen. There are two sections to this screen; one is inaptly named
Edit Components, and the other Existing Components. The first
section should be named Create New Component, and the second should
be named Edit Existing Component. Lets start with creating a new
Component.
|
|
|
|
7.1.3a – Content – Content Edit
– Component edit – New Component
Once you
select the New Component link you are taken to the screen above,
where you enter a name for your new component. Use alpha characters
only. Then click on the Create New Component
button.
|
|
|
|
The Edit New Component page has four areas. It is
similar to the page edit tab in that the left hand area of the page
has 2 selectable areas, and the right hand or center area displays
the selection you make from the left hand column.
WARNING: Components are complex and should only be created by an
experienced Interchange
developer. There are four areas on the
edit new component page and they are:
-
The Description window is used to create a
descriptive name for your component. It can contain multiple words
such as “Best Sellers”.
-
The Classes window describes what class the
component is, and consequently where it can be used. For example,
as described in the Template section there are 3 types of slots, or
classes, vertical, horizontal, and
content. Your component has to fit into one or more of
those types of slots. So if you make a component that will be used
to display a small search window for the left side of the screen,
you would probably want the search window to be narrow, and as such
you would put it in the vertical class. If on the other hand you
want to build a component that will be displayed just below your
main content window, and it will have 3 columns, then you would
want that to be either a horizontal or content
class.
-
Groups - This is simply a descriptive term you can
use to group your components, such as promotions, informational,
search, and so on. This will determine what type of component it
is, whether it is vertical or a content (horizontal) style
component and where in the template it is allowed to be
located.
-
Component HTML – This is the meat of the
component, when selected the center area becomes an editable area
that you can insert the HTML that will make up the bulk of your
component. The HTML for your component can consist of standard
HTML, Interchange tags, and component or control tags. You can use
an HTML editor to prepare the initial structure for your component.
Keep in mind that the component may be placed in many different
locations, so % sizes are preferable to fixed widths and so on.
Once you build the general structure, you can add basically
anything you would have in an Interchange page, only this component
can be reused in many areas. Component controls described next, can
be used within your component to allow a user to chose various
attributes or controls that they would like to use for a particular
use of the component.
-
Component Controls – Allows you to add or
edit component control items. Controls added here, must be
accounted for in the Component HTML area. The controls are created
as placeholders for parameters that the user can select for to
configure each component.
-
For example, lets say we want to have a Best
Sellers component. We create the HTML for the component, and we
want to have a title or banner that the user can change, depending
on the use of the component. We don’t know what the banner
will say; we just know we want a banner there that the user can
change. So in the HTML we might put the
following:
<td class="someclass">
[control name=banner default="Best
sellers..."]
</td>
This will be our banner, and if the user does not
specify otherwise, the display will be “Best
sellers…”
Next we would create a control (as
described below) with the name “banner”.
We would use “banner” for the identifier, and text
entry for the widget type. That’s about it. We could also
enter a default value, but we already have it in the HTML so
it’s really not necessary. Now when the user selects our
component to add into his page, he will simply enter whatever text
value he wants into the widget, and when the page loads the banner
will take the place of our [control name=banner]
tag.
-
In the example above we created a control that
would accept text input. You can also create controls that will
accept a variety of input. You can have True/False input, a list of
products, and many more. This is only meant to show you the
mechanics of how component controls work. The rest is up to the
Interchange
developer.
To create
a new control, you click on the link Add a new control. This
will bring up a selection window in the center or right area as
shown below in the example. Once a control is created, they have
some common features. Each has a name that is a link. Click on the
link to bring up the central edit window for the control. The
control that is being operated on will have a different background
color, typically gray, to distinguish it from the other controls.
Each control has a Label, or a user-friendly name for the control.
Each has a Widget type, which displays what type of widget the
control is using. Next there is a list of Actions, delete,
up, and down. The delete link will delete the
control, up will move the display of the control up one
place, and down will move the display of the control down
one place. One final common feature is the checkbox, which will
contain a check if you modify the control from the center display
window.
When you create a control, as shown above, within
the center window there are 3 selections to fill in or chose from
so we will discuss each in turn.
-
Identifier – This will be the identifier
that you will use in the component area to be a placeholder for
whatever value is selected or entered by the user when using a
component.
-
Label – User-friendly name to identify the
control.
-
Default Value – Example: If this was the
banner control, you may want to put in a value so if the user does
not select one, your Best sellers section will still have a
title.
-
Widget type – This allows the developer to
choose which type of value selector is most appropriate for the
control. For example, the banner control might have a text entry
type so that the user could type in whatever title they wished,
while the another control may really be a vehicle to pass
parameters to the code within the component, so the developer may
want to limit the possible parameters available to the user to pass
to the code by using a Multiple Select type.
-
Width – Define width for text, text area,
and select boxes.
-
Height – Define height for select and text
area type widgets.
-
Options – Used in conjunction with Select or
Combo type widgets. Comma separated values, value=label format,
label is the displayed choice and value is the value passed when
label is chosen. Example, the Members only control, you want to
pass a yes or no to the code in the component, options would
be:
yes=Yes, no=No
-
Filters – Filters can be used to constrain
what types of data is entered. For example, if you want only alpha
characters in your Page title, you could select A-Za-z_0-9 as your
filter. If you are selecting from database you may use DB Lookup,
and so on.
-
Lookup select – Use this box to supply
lookup field that will be used for populating certain widget types
selected above. (Select, Combo, etc) This will be used as the look
up field if “Field for Lookup” is empty.
If you use this box, it is assumed that
you are using ONE field for lookup, and that field is in the
products table. If you want to use more than one field, or fields
from a table other than products, you must use the Field for Lookup
box.
-
Field for Lookup – Use this box to supply
lookup values that will be used for populating certain widget types
selected above. (Select, Combo, etc) Can select two fields from the
same table, separate with commas, and the second field will be used
as a Label, while the first one will be used as the value for this
selection.
-
Lookup table – Use this to select a table if
other than products is to be used. “Products” is the
default table when this table window is blank.
-
Help – This is help text that will be
displayed next to the widget. You can enter comments here that may
help the user in deciding how to use the particular
control.
-
Help URL – If a control is particularly
complex, you can provide a URL to display a more in depth
description of the control usage. Provide a full link, ie
http://www.myhelp.com/myhelppage.html
, or you can provide a page reference such as
“myhelppage.html”, and a url will be generated to the
admin directory as in: http://demo.icdevgroup.org/i/demo1/admin/myhelppage.html
-
Prepend HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly before the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Append HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly after the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Pre_Filter – You can filter data coming from
the data field. Filters described above place restrictions on data
going to the database, Pre_Filter can place restrictions on or
format data coming from the database.
Finally, once you have finished creating your
component, you need to save it. You can do that by clicking on the
OK button every time you make a change in the center window, and
then by clicking on the Publish button when you are ready to commit
your changes. You can easily create a new component based on an
existing component by entering a name for your new component into
the New Name window, and click on Publish. This will create a new
component based on the one you are currently working
on.
|
|
7.1.3b – Content – Content Edit
– Component edit – Existing Component
|
|
The Edit Existing Component page has four areas.
It is similar to the page edit tab in that the left hand area of
the page has 2 selectable areas, and the right hand or center area
displays the selection you make from the left hand
column. WARNING: Components are complex and should only be
created by an experienced Interchange
developer. There are four areas on the
edit existing component page and they are:
-
The Description window is used to create a
descriptive name for your component. It can contain multiple words
such as “Upsell” shown in the example
above.
-
The Classes window describes what class the
component is, and consequently where it can be used. For example,
as described in the Template section there are 3 types of slots,
vertical, horizontal, and content. Your component has to fit into
one or more of those types of slots. So if you make a component
that will be used to display a small search window for the left
side of the screen, you would probably want the search window to be
narrow, and as such you would put it in the vertical class. If on
the other hand you want to build a component that will be displayed
just below your main content window, and it will have 3 columns,
then you would want that to be either a horizontal or content
class. In the example above, both Content and Vertical are
specified.
-
Groups - This is simply a descriptive term you can
use to group your components, such as promotions, informational,
search, and so on. This will determine what type of component it
is, whether it is vertical or a content (horizontal) style
component and where in the template it is allowed to be
located.
-
Component HTML – This is the meat of the
component, when selected the center area becomes an editable area
that you can insert the HTML that will make up the bulk of your
component. The HTML for your component can consist of standard
HTML, Interchange tags, and component or control tags. You can use
an HTML editor to prepare the initial structure for your component.
Keep in mind that the component may be placed in many different
locations, so % sizes are preferable to fixed widths and so on. In
the example above you can notice that the table width is a
percentage. In addition, if you look closely you will see that the
control col, is actually a control to set the number of columns
that will be displayed in the component. (see the cols =
“[control cols 2]”) So once you build the general
structure, you can add basically anything you would have in an
Interchange page, only this component can be reused in many areas.
Component controls described next, can be used within your
component to allow a user to chose various attributes or controls
that they would like to use for a particular use of the
component.
-
Component Controls – Allows you to add or
edit component control items. Controls added here, must be
accounted for in the Component HTML area. The controls are created
as placeholders for parameters that the user can select for to
configure each component.
-
For example, lets say we have the Upsell
component. We created the HTML for the component, and we want to
have a title or banner that the user can change, depending on the
use of the component. We don’t know what the banner will say;
we just know we want a banner there that the user can change. So in
the HTML we might put the following (you can locate this in the
screen shot above):
[control name=banner default="[L]Other items you
may like[/L]"]
This will be our banner, and if the user does not
specify otherwise, the display will be “Other items you may
like …”
Next we would create a control (as
described below) with the name “banner”.
We would use “banner” for the
identifier,
and text entry for the widget type. That’s
about it. We could also enter a default value, but we already have
it in the HTML
so it’s really not necessary. Now when the
user selects our component to add into his page, he will simply
enter whatever
text value he wants into the widget, and when the
page delivers the banner will take the place of our [control
name=banner] tag.
-
In the example above we created a control that
would accept text input. You can also create controls that will
accept a variety of input. You can have True/False input, a list of
products, and many more. This is only meant to show you the
mechanics of how component controls work. The rest is up to the
Interchange
developer.
To create a new control, you click on the link
Add a new control. This will bring up a selection window in
the center or right area as shown below in the example. Once a
control is created, they have some common features. Each has a name
that is a link. Click on the link to bring up the central edit
window for the control. The control that is being operated on will
have a different background color, typically gray, to distinguish
it from the other controls. Each control has a Label, or a
user-friendly name for the control. Each has a Widget type, which
displays what type of widget the control is using. Next there is a
list of Actions, delete, up, and down. The
delete link will delete the control, up will move the
display of the control up one place, and down will move the
display of the control down one place. One final common feature is
the checkbox, which will contain a check if you modify the control
from the center display window.
When you create or edit a control, as shown above,
within the center window there are 3 selections to fill in or chose
from so we will discuss each in turn.
-
Identifier – This will be the identifier
that you will use in the component area to be a placeholder for
whatever value is selected or entered by the user when using a
component.
-
Label – User-friendly name to identify the
control.
-
Default Value – Example: If this was the
banner control, you may want to put in a value so if the user does
not select one, your Best sellers section will still have a
title.
-
Widget type – This allows the developer to
choose which type of value selector is most appropriate for the
control. For example, the banner control might have a text entry
type so that the user could type in whatever title they wished,
while the another control may really be a vehicle to pass
parameters to the code within the component, so the developer may
want to limit the possible parameters available to the user to pass
to the code by using a Multiple Select type.
-
Width – Define width for text, text area,
and select boxes.
-
Height – Define height for select and text
area type widgets.
-
Options – Used in conjunction with Select or
Combo type widgets. Comma separated values, value=label format,
label is the displayed choice and value is the value passed when
label is chosen. Example, the Members only control, you want to
pass a yes or no to the code in the component, options would
be:
yes=Yes, no=No
-
Filters – Filters can be used to constrain
what types of data is entered. For example, if you want only alpha
characters in your Page title, you could select A-Za-z_0-9 as your
filter. If you are selecting from database you may use DB Lookup,
and so on.
-
Lookup select – Use this box to supply
lookup field that will be used for populating certain widget types
selected above. (Select, Combo, etc) This will be used as the look
up field if “Field for Lookup” is empty.
?Mike, why 2
fields?
-
Field for Lookup – Use this box to supply
lookup values that will be used for populating certain widget types
selected above. (Select, Combo, etc) Can select two fields from the
same table, separate with commas, and the second field will be used
as a Label, while the first one will be used as the value for this
selection.
-
Lookup table – Use this to select a table if
other than products is to be used. “Products” is the
default table when this table window is blank.
-
Help – This is help text that will be
displayed next to the widget. You can enter comments here that may
help the user in deciding how to use the particular
control.
-
Help URL – If a control is particularly
complex, you can provide a URL to display a more in depth
description of the control usage. Provide a full link, ie
http://www.myhelp.com/myhelppage.html
, or you can provide a page reference such as
“myhelppage.html”, and a url will be generated to the
admin directory as in: http://demo.icdevgroup.org/i/demo1/admin/myhelppage.html
-
Prepend HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly before the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Append HTML – This allows you to put any
HTML code in next to the widget you selected above. This HTML will
be located directly after the widget. You can also insert standard
Interchange links such as <a href=”[area
index]”>index</a> and the links will point to the
regular catalog location rather than the admin.
-
Pre_Filter – Mike I
don’t know what this
is?
Finally, once you have finished creating your
component, you need to save it. You can do that by clicking on the
OK button every time you make a change in the center window, and
then by clicking on the Publish button when you are ready to commit
your changes. You can easily create a new component based on an
existing component by entering a name for your new component into
the New Name window, and click on Publish. This will create a new
component based on the one you are currently working
on.
|
|
|
|
7.2
Content - Clone Component Sets
|
|
The Clone Component Sets tab of the Content tab is
a tool for propagating changes two several pages at once. What this
page allows you to do is develop a page, on a specific template,
with the component sets that you want to use for a certain part of
your web site. Lets say that you wanted to make sure that all pages
which had anything to do with your products all contained a small
search window, a shopping cart, and always displayed your best
selling items. You could design your page with the proper component
set, and then go to each individual page, select the proper
components, put them into the proper slots, and save each one. Or
you could simply go to the Clone Component tab and do it with the
click of a button.
The Clone Component page is very simple. You just
choose a source file, then select which pages you want to
“Push” the components and set up to, then press the
Push Components button. As shown below, once you select a source
page, the pages (and the directories that contain pages) that have
the same template (and are therefore eligible to be cloned) are
highlighted. The pages that do not have the same template
are grayed and not selectable. There are a few other convenience
tools for you in this window as well. There is a Check all, an
Uncheck all, and a Back Files up checkbox. The check all simply
selects all of the files that are eligible for the clone.
Keep in mind that the Check all feature checks ALL of the
eligible files; even all those in the directories shown that are in
bold. So use with care. Uncheck… yes
unchecks any boxes you have selected, so you can start over. Back
files up; well it backs up any files that are changed. The standard
location for these backed up files is
“catalogname/backup/pages/” but may be different on
your system.
TIP: You can clone a Template as well as a
Component or component
set.
|
|
|
|
|
|
7.3 Content - Surveys
|
|
How many times have you wished you could get
customer feed back on something? Well with Interchanges built in
Survey builder, its easy. You can use the survey builder for things
other than surveys, want to get some consumer information prior to
allowing a customer to download a file, or view a certain page?
It’s all just a few keystrokes away.
So lets lay it out, and then build a survey. There
are three sections under the Survey tab. They are Edit an Existing
Survey, Create a New Survey, and Access Survey
results.
|
|
7.3.1
Content – Surveys – Edit existing
survey
|
|
From the first screen, you click on the name of
the existing survey you would like to edit. To the immediate right
of the survey name link, there is a link (run). This allows
you to run the survey from this location, perhaps for testing
purposes. But we are interested in editing an existing survey, so
here is the first screen you will encounter once you click on a
survey from the front section:
|
|
7.3.1a Content – Surveys – Edit
existing survey – General
This is the first tab in the edit existing survey
group, the General tab. There are six tabs under the edit existing
survey group. Each of them will have the same display on the left,
and the area to the right will change depending on the tab. The
area on the left is a display of the list of questions in the
survey. Because this area will be seen throughout the tabs, lets
discuss how the left side works.
You can see a number of questions on the left
side, each is formatted the same way so we will pick the first one,
Product Evaluation, and examine it. Under the title Product
evaluation, there are 3 sets of items. First, product_value
link, then “Was our product a good value?”, and finally
a results link.
-
Question
Field Name – product_value link. When you first created a
question, a record with the Survey name and the Question Name is
entered into a table Survey with the following form
“survey::field”. The Question field name link simply
takes you to the specially formatted screen that allows you to edit
the Survey table, and this question / record in particular. There
are a number of things you can do to change the question, so lets
look at them.
-
Survey::Field – Not editable, simply
reflects the survey and question names as they exist in the table
Surveys.
-
Question – Text field in which the question
to be displayed is entered. You can edit this, or change it in
anyway you like to get the appearance you want for the site. You
can insert HTML code here.
-
Answer type = This allows you to control how the
consumer will answer the question. You can simply have a text
field, where the customer can type away to their hearts content, or
you can control possible answers with multiple select, radio boxes,
check boxes, and so on.
-
Choices – Used in conjunction with Answer
type, if you selected a type that requires options, this is the
area to place them. Options need to been in the proper format, with
the value to the left of the equal sign, and a new line or return
between each option. You can have a label form, such as
“y=Yes I Agree” or “yes=Yes” or no label
and simply “Yes”.
-
Consistency check – This box helps you make
sure input is in the form you wish, or if you get input. Some of
the choices are Required answer, which would not let the survey
proceed without an answer in this questions field. Or “an
email address” which would require that the answer at least
be formatted like an email address i.e. someone@somesite.com .
There are several other consistency checks and you can design on
your own or contact your Interchange
Developer.
-
Width – Sets the width for all the boxes and
option selects on this page. Each question has its own page, so
normally this only affects one or two boxes. You may find that you
can use this and the Height setting (below) in conjunction with the
Width specification for the editor table, and the Width
specification for the Label column found in the Display
Page setting area.
-
Height – Same as width.
-
Filter – Not editable
Preset
Note: At the time of writing, the Graphing option is not
supported on most systems. There are some technical limitations
that need to be overcome on a system level. While graphing is
possible, in many cases it is not practical at this time. Please
contact your Interchange Developer for more
information.
-
The next and final tab on
the Question Name Field link, is graphing. Graphing has several
options to discuss. The first thing to do if you want to enable
graphing is make sure that you have the GD::Graph module installed.
If you do not know what this is, talk to your Interchange Developer.
-
Enable Graph - Drop down window with yes or
no.
-
Graph Type – Drop down window with 2
choices, Pie Chart or Area Chart.
-
Graph Labels – Labels to be used for
display on the graph. Use your choices values from the question tab
for “data_value” then create labels as in:
“data_value”=Label for Graph
-
Low water for
“other” – Place the number of responses that
should trigger placement in “Other” category. For
example lets say you have a Yes or No question, but it is not a
required question. 320 people answer it with a yes or no. If you
set this to 15, then when 15 or more people have answered, that
category would be displayed on the graph; otherwise it would not be
displayed and the results would be lumped into the
“Other” category.
-
Width of chart image – How wide your
chart will be, default 400 pixels.
-
Height of chart image - How high your chart
will be, default 300 pixels.
-
Graph Title – Enter a Title for your
graph if you want it to be something other than the question
itself, which is the default.
-
Question Text - Was our product a good value?
Simply a display of the question. No links.
-
Results link – This link will take you to a
rendered version of this question, how it will appear on the web
site. Use this link to observe changes and how they look on the
site.
Now that we have discussed the Left Hand area that
is the same throughout the tabs, lets get back to discussing the
tabs and their uses. The display on the right hand side of the
screen will change with each tab, and we will be discussing that
portion of each tab.
There are 3 parts to the right display area on the
General tab, Main Title, Display Type, and Intro
text.
-
Main Title – This is simply the title for
the survey. It is displayed on the Edit Existing Survey section of
the Setup Survey screen, see the screen above where it is shown as:
customer_satisfaction
-- How do you like our service? (run)
-
Display Type – This is a drop down that
allows you to select how you would like the questions arranged, the
choices are
-
Question on one line, answer on line below
or
-
Question in left column, and answer in right
column
|
|
|
|
7.3.1b Content – Surveys – Edit
existing survey – Questions
|
|
The questions tab is fairly straight forward, if
you know how it is supposed to be formatted. Kind of like riding a
bike, once you have done it its easy! I have included a screen shot
for questions so you can see an example of how to set up the
questions. You can create a survey on multiple pages, or all on
one. A title string for a new page is created with the following
format:
=Your Title for the Page
Notice that there is a blank line before and after
the string. Also the string begins with an “=” sign.
Then to put questions on that page, put an identifier for each
question, in the format shown. Make sure you have a blank line
between the Title and your identifier. If you have multiple
questions per page, the identifiers only need to be separated by a
carriage return, not a blank line. Make sure identifiers are a
simple descriptive word, with no spaces. So a page would look
like:
=Your Title for the Page
question1
question2
question3
=A second Page
|
. This allows you to upload
a file from your local computer to the current
directory.
folder and the
contents will be displayed. To return up a directory, click on the
(new file) link from the 