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; } } }

Cross Branch file browser in 6.5

JeremyH

Greg Zevin created a file browser callout a while back for browsing for files across branches. Is this still the best way to go about allowing DCT users to select files that are in different branches in TS 6.5? Are there other alternatives? (Symlinks do not seem to get the job done.)

Find more posts tagged with

Comments

jbonifaci

Jeremy, you could probably use the cci browse url:
/iw-cc/command/iw.formspub.browse_for_link?vpath=&ceiling=&hier_callback~Jeff

JeremyH

Now that looks pretty cool.

What is the syntax for utilizing it. Do I just have a callserver call the cc tag directly with some parameter telling it the variable to update?

http://sncdevts2/iw-cc/command/iw.formspub.browse_for_link?vpath=/default/main/Web_Sites/globalcontent/WORKAREA/global/common/media/images&ceiling=/default/main/Web_Sites/globalcontent/WORKAREA/global/common/media/images&hier_callback#

jbonifaci

vpath is the directory to start at (I believe it needs to start with server name (//server/store/main/branch...). ceiling is the celing directory, same syntax as vpath. hier_callback is the function to call back to when the user selects a file. show_thumbnail can be true or false whether you want the thumbnail view to show or not. An example function call for hier_callback is:
hier_callback=eval( callback_81 = function(path) { top.opener.MyCallBack(path); })The browse would then call the function MyCallBack in the calling page after the user selects a file, you then do with it as you please using that function.

~Jeff

brandon1

One caveat that I have noticed with this functionality on Windows, is that it will allow a user to navigate into a directrory that they would not have permission to access via the gui.

Current Project: TS 6.1
Environment: Windows

pawlr

This looks awesome! We've beens truggling with this since forever it seems.

Can anyone post me how this might work in context with the hier_callback parameter?

might this work?

<item name="image">
<description>Main feature image</description>
<text required="f" maxlength="255" size="50">
<callout type="cgi" label="Select Image" url="/iw-cc/command/iw.formspub.browse_for_link?vpath=/default/main/&ceiling=/default/main/&hier_callback=image"/>
</text>
</item>

brandon1

As Jeff mentions hier_callback is a javascript function that exists in the parent of the file selection window. So just putting the item name is not enough.

Current Project: TS 6.1
Environment: Windows

pawlr

So the only way to really use this is to set an event handler in FormAPI and set the hier_callback function. Does hier_callback remember the item reference ?

brandon1

All hier_callback will send to the function specified is the file that was chosen. So the call back function would need to set the chosen file into the correct item.

Current Project: TS 6.1
Environment: Windows

jbonifaci

A simple example would be:
url="/iw-cc/command/iw.formspub.browse_for_link?vpath=&ceiling=&
hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().IWDatacapture.getItem("/Image&quot Smiley Wink

.setValue(path);})"~Jeff

jbonifaci

One thing I forgot to mention is if you do it as I showed above, the vpath and ceiling will be hard coded, so if you're trying to point to the current workarea, you'll probably have to do this instead with formapi.

~Jeff

pawlr

Thanks! The hard coding to a specific workarea is not a problem because all our people work in one area..

Tried the code you suggested but getting "no selection callback defined for this hierbrowser"

Here's my code:

<item name="pick_image">
<description>pick image</description>
<text required="f" maxlength="255" size="50">
<callout label="Pick an image" url="/iw-cc/command/iw.formspub.browse_for_link?vpath=/default/main/hbo/homepage/WORKAREA/content/img/bbs&ceiling=/default/main/hbo/homepage/WORKAREA/content/img&
hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().IWDatacapture.getItem("/pick_image&quot Smiley Wink

.setValue(path);})"/>
</text>
</item>

I'm using 5.0 DTD and the above item is at the root level - it seems like it can't find the "pick_video" item, am I pathing it wrong?

jbonifaci

I'm in a good mood, so here's an example of doing it through formapi:
<script>
IWEventRegistry.addFormHandler('onFormInit', initializeDct());

function initializeDct()
{
IWEventRegistry.addItemHandler('/BrowseOne', 'onCallout', doBrowse);
IWEventRegistry.addItemHandler('/BrowseTwo', 'onCallout', doBrowse);
}

function doBrowse(itemObject)
{
var itemName = itemObject.getName();
var vpath = '';
var ceiling = '';
window.open('/iw-cc/command/iw.formspub.browse_for_link?vpath='+vpath+
'&ceiling='+ceiling+
'&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doBrowseCallBack("'+itemName+'", path)})',
'Browse','scrollbars=yes,width=600,height=500');
}

function doBrowseCallBack(itemName, path)
{
var path = new String(path);
path = path.replace(/.*[\\\/]WORKAREA[\\\/][^\\\/]*/, "");
IWDatacapture.getItem(itemName).setValue(path);
}
</script>

<item name="BrowseOne">
<label>Browse One</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>

<item name="BrowseTwo">
<label>Browse Two</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>
You'll obviously need to add some logic to define your vpath and ceiling in the doBrowse function, but other than that it should work OOTB. It also gives you the chance to manipulate the path once the browser returns it. In my doBrowseCallOut function, I am removing everything from the path before and including the workarea name.

Hope this is helpful

~Jeff

jbonifaci

Try removing the new line between & and hier_callback, I only added it to reduce the width of the post.

~Jeff

pawlr

Jeff - your kung-fu is truly da bomb.

Works great! Just wondering - as long as you're in a good mood Smiley Happy

if you know whether any code adjustments could be made to make this work on FireFox - we have some people here, myself included that like to work in FF (in FF I still get the 'no selection callback defined for this hierbrowser in FF)

You are the Jscript master.

jbonifaci

Heh, glad I could help. As far as FF goes, I haven't been converted yet, so can't help you out there. Good luck...

~Jeff

pawlr

Jeff - for reference if its useful to others I'm going to post the full cross-branch image callout datacapture based on the code you gave me. I got it to work in FF by changing the & to & (works in both IE and FF now).

In order for the case statement to work on replicants, I had to strip off the replicant [indicies]/.

It should work if paths are modified to fit your architecture. We're still using the 4.5 dtds. I don't know if it will work with 6.0 dtds but I'm thinking it probably should since I think indexing is the same..

<?xml version="1.0" standalone="no"?>
<!DOCTYPE datacapture SYSTEM "datacapture4.5.dtd">

<data-capture-requirements type="content" name="****">



<ruleset name="testData">

<description>
Enter information
</description>

<script language="javascript1.2">
<![CDATA[

IWEventRegistry.addFormHandler('onFormInit', initializeDct());

function initializeDct() {
IWEventRegistry.addItemHandler('/BrowseOne', 'onCallout', doBrowse);
IWEventRegistry.addItemHandler('/BrowseTwo', 'onCallout', doBrowse);
IWEventRegistry.addItemHandler('/example2/entry/BrowseThree', 'onCallout', doBrowse);
IWEventRegistry.addItemHandler('/entry_outer/entry_inner/BrowseFour', 'onCallout', doBrowse);
}

function doBrowseCallBack(itemName, path) {
var path = new String(path);
path = path.replace(/.*[\\\/]WORKAREA[\\\/][^\\\/]*/, "");
path = path.replace(/(\"\])$/, "");
//alert(path);
IWDatacapture.getItem(itemName).setValue(path);
}

function popBrowser(x_vpath, x_ceiling, x_itemName) {
window.open('/iw-cc/command/iw.formspub.browse_for_link?vpath='+x_vpath+'&ceiling='+x_ceiling+'&show_thumbnail=true&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doBrowseCallBack("'+x_itemName+'",path)})','Browse','scrollbars=yes,width=600,height=500');
}

function doBrowse(itemObject) {
var itemName = itemObject.getName();
itemNameMatch = itemName.replace( /\[[0-9]*\]/gi, "");
//alert ( itemNameMatch );
switch( itemNameMatch ) {
case '/BrowseOne':
var vpath = '/default/main/domain/homepage/WORKAREA/content/img/dir1';
var ceiling = '/default/main/domain/homepage/WORKAREA/content/img';
break;
case '/BrowseTwo':
var vpath = '/default/main/domain/homepage/WORKAREA/content/img/dir2';
var ceiling = '/default/main/domain/homepage/WORKAREA/content/img';
break;
case '/example2/entry/BrowseThree':
var vpath = '/default/main/domain/homepage/WORKAREA/content/img/dir3';
var ceiling = '/default/main/domain/homepage/WORKAREA/content/img';
break;
case '/entry_outer/entry_inner/BrowseFour':
var vpath = '/default/main/domain/homepage/WORKAREA/content/img/dir4';
var ceiling = '/default/main/domain/homepage/WORKAREA/content/img';
break;
default:
var vpath = '/default/main/domain/homepage/WORKAREA/content/img/defaultdir';
var ceiling = '/default/main/domain/homepage/WORKAREA/content/img';
}
window.open('/iw-cc/command/iw.formspub.browse_for_link?vpath='+vpath+'&ceiling='+ceiling+'&show_thumbnail=true&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doBrowseCallBack("'+itemName+'",path)})','Browse','scrollbars=yes,width=600,height=500');
}

]]>
</script>

<item name="BrowseOne">
<label>Browse One - dir1</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>

<item name="BrowseTwo">
<label>Browse Two - dir2</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>

<container name="example2">

<item name="entry">
<description>*</description>
<replicant default="0" min="0" max="6">

<item name="BrowseThree">
<label>Browse Three - dir3</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>

</replicant>
</item>

</container>

<item name="entry_outer">
<description>*</description>
<replicant default="0" min="0" max="6">

<item name="entry_inner">
<description>*</description>
<replicant default="0" min="0" max="6">

<item name="BrowseFour">
<label>Browse Four - dir4</label>
<text maxlength="200" size="50">
<cgi-callout label="Browse" />
</text>
</item>

</replicant>
</item>

</replicant>
</item>

</ruleset>

</data-capture-requirements>

JeremyH

Here is an alternate version that I moved out to its own .js file.

This is useful if you do it in multiple places. Example syntax is:
Usage:
<script src="customBrowse.js"/>
<item name="my_item">
<text>
<callout label="Browse">
</text>
</item>
<item name="another_item">
<text>
<callout label="Browse">
</text>
</item>
<script>
IWEventRegistry.addFormHandler("onFormInit",init);
function init() {
initBrowse("/my_item","/default/main/randomBranch/WORKAREA/a");
initBrowse("/another_item","/default/main/anotherBranch/WORKAREA/waname/dir/subdir","/default/main/anot
herBranch/WORKAREA/waname/dir");
}
</script>

// define a global array for storing ceiling and initial directories
// only do this if it is not already defined
if (typeof _cb_ceilingDirs == 'undefined') {
_cb_ceilingDirs = new Array();
_cb_initialDirs = new Array();
}
// Initialization
function initBrowse(itemName,initialDir,ceilingDir) {
if (typeof ceilingDir == 'undefined') {
ceilingDir = initialDir;
}
_cb_ceilingDirs[itemName] = ceilingDir;
_cb_initialDirs[itemName] = initialDir;
IWEventRegistry.addItemHandler(itemName,'onCallout', doBrowse);
}

// Callout function to browse for files in different workareas

function doBrowse(itemObject)
{
var itemName = itemObject.getName();
// Strip the replicant counter (if applicable)
var regex=/\[\d\]/;
var lookupName = itemName.replace(regex,"");
var vpath = _cb_initialDirs[lookupName];
var ceiling = _cb_ceilingDirs[lookupName];
window.open('/iw-cc/command/iw.formspub.browse_for_link?vpath='+vpath+
'&ceiling='+ceiling+'&show_thumbnail=true'+
'&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doBrowseCallBack
("'+itemName+'", path)})',
'Browse','scrollbars=yes,width=600,height=500');
}

// Callback for the browser callout function

function doBrowseCallBack(itemName, path)
{
var path = new String(path);
path = path.replace(/.*[\\\/]WORKAREA[\\\/][^\\\/]*/, "");
IWDatacapture.getItem(itemName).setValue(path);
}

pawlr

JeremyH - Tried it out and works great! One little change though to make it work for nested replicants.

in the line of the external file that says:

var regex=/\[\d\]/;

add the "g" so that it can pick up multiple nested replicants

var regex=/\[\d\]/g;

Also to work in FF I use this version of the call to the iw-cc command - removed the space between the itemName endquote comma and the path argument:

window.open('/iw-cc/command/iw.formspub.browse_for_link?vpath='+vpath+'&ceiling='+ceiling+'&show_thumbnail=true'+'&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doBrowseCallBack("'+itemName+'",path)})','Browse','scrollbars=yes,width=600,height=500');

jbonifaci

First off, you both need to learn how to post pretty code, check out this post by Adam.

Secondly, just to nitpick, unless it is a regex you are going to use globally, I think it is cleaner to just include the regex in the statement, rather than defining it separately:
var lookupName = itemName.replace(/\[\d+\]/g,"");~Jeff

JeremyH

Ah - You have much more experience with js regex than I do.
As for the posting of pretty code...
well, I have no excuse. How about 'Jeff already posted a nice pretty version for people to read. Our updates were just intended to allow quick cutting and pasting.'

jbonifaci

Haha, just trying to help you out with making pretty posts in the future, they are much easier to read

.

~Jeff

dann

Jeremy, you could probably use the cci browse url:
/iw-cc/command/iw.formspub.browse_for_link?vpath=&ceiling=&hier_callback~Jeff

Jeff,

Can we not do the samething with import
iw-cc/import?vpath=.....

I tried using :

function doImport(itemObject)
{
var itemName = itemObject.getName();
itemNameMatch = itemName.replace( /\[[0-9]*\]/gi, "");
//alert ( itemNameMatch );
.................
.............................................................
.........................................

window.open('/iw-cc/import?vpath='+vpath+'&ceiling='+ceiling+'&show_thumbnail=true&hier_callback=eval(callback_81=function(path){opener.parent.getScriptFrame().doImportCallBack("'+itemName+'",path)})','Import','scrollbars=yes,width=600,heigh t=500');
}

function doImportCallBack(itemName, path)
{
var path = new String(path);

$path =~ s/.*[\/\\](.*)/$1/;

path = "/html_output/eas-docs/images/" + path;
IWDatacapture.getItem(itemName).setValue(path);
}

thanks in advance

dann

vpath is the directory to start at (I believe it needs to start with server name (//server/store/main/branch...). ceiling is the celing directory, same syntax as vpath. hier_callback is the function to call back to when the user selects a file. show_thumbnail can be true or false whether you want the thumbnail view to show or not. An example function call for hier_callback is:
hier_callback=eval( callback_81 = function(path) { top.opener.MyCallBack(path); })The browse would then call the function MyCallBack in the calling page after the user selects a file, you then do with it as you please using that function.

~Jeff

How do i do the same thing for import?
Tried this but does not work!
/iw-cc/command/iw.teamsite.import_dialog?vpath=&ceiling=&hier_callback

yuvpurush

Hi,

The environment is TS 6.5, Win 2003 server. 1 Branch and 5 workarea.

As per my use case, There is one admin WA.In that DCT, there should be only one file browser and it should pick up files from any of the other workareas inclusding the current WA.

since we are hardcoding the vpath and ceiling, i dont think we can use the above mentioned.

Is there any way of generalizing the vpath and ceiling, so that it can browse on all workareas.

Thanks
yuv