Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Web CMS (TeamSite)
Dynamically Applying CSS on VFE content in DCR/DCT
KTReddy
The requirement is our client wants to change the CSS(style sheet) in VFE text area
in DCT. When they type the text or copy and paste the content in VFE text area, CSS should apply on it.
Each and every branch has seperate CSS file in workarea and we want to maintain only one visualformatconfig.xml file
(i.e., we are not interested to create multiple visualformatconfig.xml files for every branch just because of CSS.
Few questions as follows:
1. Is there anyway to pass CSS file name as parameter to visualformatconfig.xml file call in text area tag in DCT?
So that we can have limited number of visualformatconfig.xml files and many CSS files.
2. According to tst.vf.600.dev.pdf manual page 227, I updated datacapture.cfg as follows, is this the right call?
<?xml version="1.0" standalone="no"?>
<!DOCTYPE data-capture-requirements SYSTEM "datacapture6.0.dtd">
<data-capture-requirements type="content" name="genericContent">
<ruleset name="genericContent">
<description>
This template will be used for Generic Content
</description>
<item name="ContentInfo">
<label>Content</label>
<replicant default="1" min="1" max="10" hide-name="f">
<item name="SectionHeading">
<label>Section Heading</label>
<description> Enter Section Heading, if desired.</description>
<text size="50" required="f" maxlength="250" />
</item>
<item name="SectionContent">
<label>Section Content</label>
<description> Enter the content for this section. Click plus[+] to add a section. </description>
<textarea rows="15" cols="60" wrap="virtual" required="f" external-editor="visualformat" external-editor-config="/iw/config/visualformatconfig_nofont.xml"/>
</item>
</replicant>
</item>
<script>
strEditorName = IWDatacapture.getUser();
strCss = "../../../intraents/oit/intranet_styles.css";
function loadStyleSheet(strEditorName)
{
eWebEditPro.instances[strEditorName].editor.addLinkedStyleSheet(strCss);
}
function setStyleSheet(strEditorName, strCSS)
{
eWebEditPro.instances[strEditorName].editor.setProperty("StyleSheet", strCSS);
}
</script>
</ruleset>
</data-capture-requirements>
3. Without changing the visualformatconfig.xml, is there any way to handle this kind of issues???
Any suggestions please..
Find more posts tagged with
Comments
Migrateduser
Your syntax looks dead on. As I understand, you're basically interested in setting a variable from within the DCT / FormAPI and referencing it from ewebeditpro.js, correct? In this case, your code looks as though it'll do just that.
I had another thought, too... if you didn't want the slight overhead of setting the strCss variable in your DCT's, you could have a CSS for each branch (as you need them), named appropriately, and have ewebeditpro.js do some string manipulation on a hidden form value that TeamSite already injects in your DCT that displays what workarea you're in (the field name is "area_path") and call the CSS based on that.
Dave
Current Environments:
(1) TS 6.5 on W2K3 (x2 - diff. imp.)
(3) Vignette V7 Portal on Solaris 9
KTReddy
Dave,
Could you pls suggest me, if I am doing wrong.
Except datacapture.cfg, I did't updated any files like visualformatconfig.xml or ewebeditpro.js. my visualformatconfig.xml still contains the following tag in it.
<style publishstyles="false" href="[eWebEditProPath]/ektnormal.css" equivClass="strict" wrapstylewithdiv="false" preservewordstyles="false" preservewordclasses="false"/>
I can give CSS file name as styles.css which may have diff tags in diff. branches. but, I am not getting the the following advice from your post:
have ewebeditpro.js do some string manipulation on a hidden form value that TeamSite already injects in your DCT that displays what workarea you're in (the field name is "area_path") and call the CSS based on that.
I would appreciate, if you can attach any sample files which can help me to solve this issue.
Thanks,
KT
Migrateduser
The .js files I referred to are already there, in <iw-home>/httpd/iw/ewebeditpro. No need to upload anything. I meant that you may need to put in some additional JS code in ewebeditpro.js to customize your VFE. When any slightly complex customizations are done to VFE, one needs to edit this file (or edit a copy thereof). So, somewhere in this file (you might need to do trial and error to find out where, exactly), put in some code that will do something similar to the following:
someObject.write('<link rel="stylesheet" href="' + someVar + '" type="text/css"/>');
Where "someObject" is a document object that refers to the VFE -- I don't know if this stynax is correct, you'd have to play around a bit to figure that out -- and someVar represents the location of the stylesheet, which is based on the workarea, as I understand it.
This is how you would include the reference in a regular HTML document, but I'm doubtful that VFE works this way. You may just need to reference it by <style publishstyles .../>, as what's present in visualformatconfig.xml. Either way, it requires some extent of research on your part to discover what syntax Ektron uses and to try and emulate that dynamically in your JS code.
Dave
Current Environments:
(1) TS 6.5 on W2K3 (x2 - diff. imp.)
(3) Vignette V7 Portal on Solaris 9
KTReddy
Thanks for your time and now I got some idea. I will do research on this and post the result.
cc96ai
Hi,
I am also trying to load the css file dynamically , (which the code from the manual)
however its not success at all
and I open the case in support
they only suggest that i create another visualformatconfig file
---------------------------------------------------------------------------------
From Manual : tst.vf.600.dev.pdf, P227
Dynamically Changing a Style Sheet for a Single Instance of the Editor
1. Open the page to which you want to add a style sheet.
2. Add the following JavaScript function below the page’s head tag.
<script language="JavaScript">
function setStyleSheet(strEditorName, strCSS)
{
eWebEditPro[strEditorName].setProperty("StyleSheet", strCSS);
}
</script>
Replace strEditorName with the name of the editor, and strCSS with the name of the style sheet.
3. On the page where you create VisualFormat, set the onready event to call the setStyleSheet function. For example,
<script language="JavaScript">
eWebEditPro.onready = "setStyleSheet(eWebEditPro.event.srcName, '/yourpath/xyz.css')";
</script>
--------------------------------------------------------------------------------
--------------------------------------------
TS 6.1 W2K3
OpenDeploy 6.0
CC Pro/Std
KTReddy
We were able to make this work and our files contains the following info. Try this, This may not meet 100% of your requirement, but, it will give you an idea.
==========
datacapture.cfg
============
<script>
var workarea = top._dcWin.gWorkarea;
var strCss = "/iw/cci/meta/injection/iw-mount"+workarea+[cssFilePath -- after workarea, if CSS is in your workarea];
var eWebEditPro = top._dcWin.eWebEditPro;
eWebEditPro.parameters.styleSheet = strCss;
</script>
CSS file[here you can have custom tags]
============
/* CSS Document */
body {
color: #000000;
font-family: Arial;
font-size: 9pt;
}
VFE config[here check for <viewas> tag in your config file and make sure you have the following attribute:
========
<viewas enabled="true" publish="cleanhtml" mode="body" unicode="false">
ewebeditprodefaults.js
========================
this.editorGetMethod = "getBodyHTML";
cc96ai
Thanks
it works perfectly fine to change whole DCT page's VFE
Do you think this will be possible to change each VFE's style ?
e.g.
--------
DCT
--------
- VFE-1 , style1.css
- VFE-2 , style2.css
Thanks
--------------------------------------------
TS 6.1 W2K3
OpenDeploy 6.0
CC Pro/Std
KTReddy
I am not getting your question, I am not sure how can you track the VFE -X in DCT? Some fields in DCT may have many replicants and you may have many VFEs in DCT also. Now you know the direction, so, try and let me know, if you get success.
Thanks,
KT
cc96ai
I mean can we set css into single instance of VFE insteads of whole DCT page.
I m still looking a way to implement on it
i will let you know if i find a way to do it.
thx
--------------------------------------------
TS 6.1 W2K3
OpenDeploy 6.0
CC Pro/Std
Ish
Will this code examples also apply to teamsite 552. with templating ?
I am not very familiar with perl & new to IW ,
Will these 2 get our workarea name & style sheet name?
var workarea = top._dcWin.gWorkarea;
var strCss = "/iw/cci/meta/injection/iw-mount"+workarea+[cssFilePath -- after workarea, if CSS is in your workarea];
RobertPisor
In case anyone's still using TS 5.5.2, yes these should work. I've just tried them out.
TST 5.5.2
Robert