nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customize Individual Field in DCT

alanhill

Hi,

I would like to customize the appearance of an item (or container) in a Teamsite Form/DCT, but specifically an individual container, as opposed to all containers or all items.

I've read through the UI customisation guide and the FormAPI guide, and searched the forums but can't seem to find any way to do it.

Ideally I'd like to do it as part of 'init' on loading the form, but any way I can achieve would be great.

Anyone have any inspiration or experience of doing anything like this?

Find more posts tagged with

Comments

Adam Stoller

Hi,

I would like to customize the appearance of an item (or container) in a Teamsite Form/DCT, but specifically an individual container, as opposed to all containers or all items.

I've read through the UI customisation guide and the FormAPI guide, and searched the forums but can't seem to find any way to do it.

Ideally I'd like to do it as part of 'init' on loading the form, but any way I can achieve would be great.

Anyone have any inspiration or experience of doing anything like this?

It might help if you provide a reasonably detailed use-case for what you want to do - i.e. what aspect of what item (or container) type do you want to change, how, for what reason / scenario?

That being said - if I do understand what you're trying to do - it may be a combination of JS and/or CSS to get there (and I'm still not sure it would work). What I think might work would be to somehow get access through the DOM to a particular item's element and tack-on a

class

style

attribute to that element and then utilize CSS either via reference or inline (respectively) to alter the appearance of that particular item.

What you'd have to lookout for is if there already is one of those attributes associated with the item and whether changing it would "break" something else.

alanhill

Hi, thanks for the reply.

My particular scenario is that in our Forms we add a couple of CGI callout buttons to point users to PDF 'Quick Start Guides' that we produce with our templates.

The example piece of code is below:

[lt]container name="QuickStartGuide" location="QuickStartGuide"[gt]
[lt]label[gt]Quick Start Guide[lt]/label[gt]
[lt]item name="QuickStartGuideDoc"[gt]
[lt]hidden[gt]
[lt]cgi-callout label="Vertical-Panelled Page Quick Start Guide"/[gt]
[lt]/hidden[gt]
[lt]/item[gt]
[lt]item name="QuickStartGuidesGeneral"[gt]
[lt]hidden[gt]
[lt]cgi-callout label="General Quick Start Guides"/[gt]
[lt]/hidden[gt]
[lt]/item[gt]
[lt]/container[gt]

As you can see a simple container with two cgi callouts, which we add events to later in the Form API.

What I wanted to do was to identify this particular container by name or location and style it differently to other containers (in practice to make it stand out a little more and apply a corporate branding over it that reflected how 'help' is accessed in other internal tools - just to ease the user's experience).

I've looked in a fair depth at the DOM trough IE and FireFox and apart from giving each container an 'ID' as it loads, there doesn't seem to be a way to identify this container by it's ID or location in FormAPI.

Cheers