Jump to content

CDML & conditional value lists


This topic is 7742 days old. Please don't post here. Open a new topic instead.

Recommended Posts

Hey all,

Me again. I've been chugging along on this CDML stuff, which for the most part seems to suit my needs. But, I've run into a situation where conditional pop-up menus are necessary via web entry. I've learned this is not possible via cdml since the web form needs to post back to the db before it can alter the lists.

I was going to work around it by dividing the html form process into two separate pages (one which submits the initial data the the other which edits it using the conditional value lists). But, this will not work because my conditinal list is based on related values (another thing CDML does not deal with it seems).

So, I am wondering what kinds of work arounds y'all have implemented in oder to use related value lists on the web. Or, alterntively, what solutions have you come up with to have conditinal value lists? From what I've read in the forums, there's lot of JavaScript talk and/or workarounds involving calc fields. Could anyone elaborate?

many, many thanks as always

Nate

Link to comment
Share on other sites

Hi Garry,

Yes, I'm definitely interested. Is the JavaScript complicated? I ask because, well, I don't know any. Would it be a pretty difficult "first project" for Java? None the less, I'd be interested in any more details (or even code if the site might be available).

thanks!

Nate

Link to comment
Share on other sites

Well, I hope it is something I can work through. It is only one level deep. The user will pick a "showName" and will then have to choose from a generated list of shots ("shotName"). I have this working in FilmeMaker itself using a master database and two related db's ("shows" and "shots"). But, as you explained to me last week, relational valuelists don't work too well with CDML and I'll pretty much learn whatever I have to get them to work via the web.

please let me know if I can provide any more details

thanks

Nate

Link to comment
Share on other sites

Do you use a Portal on a Layout in "shows" to display related "shots"? If so, you would loop through each record of "show" and each Portal row for each record. Create the arrays like this:

<head>

<script>

var shows = new Array();

[FMP-Record]

i = 0 ;

var show_shots = new Array() ;

[FMP-Portal:shots]

show_shots[i++] = "[FMP-Field: shotName]";

[/FMP-Portal]

shows("[FMP-Field:showName]") = show_shots ;

[/FMP-Record]

</script></head>


Now you will need to be able to populate the <select> tags.

All the best.

Garry

Link to comment
Share on other sites

Here is the next hint. This will populate the first pop-up:

Show:<select onChange="ShowShots();">

<option>Select a Show</option>

<script>

for (m=0; m < shows.length; m++) {

document.write("<option value='" + shows[m] + "'>" + shows[m] + "</option>");

} ; // end for

document.write('</select><br>');

</script>


As you can see whenever the a change is made to the selection a Javascript function named "ShowShots()" is called. this function will change the Select List contents for Shots.

All the best.

Garry

Link to comment
Share on other sites

Hi Garry,

I was able to get the above code to work initially, but for some reason I cannot get it to work again.

<html>

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head><body bgcolor="#FFFFFF" text="#000000">

[FMP-InlineAction: -db=shows.fp5, -lay=Form_View, -FindAll]

<script>

var shows = new Array();

[FMP-Record]

i = 0 ;

var show_shots = new Array() ;

[FMP-Portal: showName]

show_shots[i++] = "[FMP-Field: showName::t_FX Name]";

[/FMP-Portal]

shows("[FMP-Field:t_showName]") = show_shots ;

[/FMP-Record]

</script>

[/FMP-InlineAction]

<form action="FMPro" method="post">

<INPUT TYPE="hidden" NAME="-db" VALUE="timeCard.fp5">

<INPUT TYPE="hidden" NAME="-lay" VALUE="Form_View">

<INPUT TYPE="hidden" NAME="-format" VALUE="new.html">

Show:<select onChange="ShowShots();">

<option>Select a Show</option>

<script>for (m=0; m < shows.length; m++) { document.write("<option value='" + shows[m] + "'>" + shows[m] + "</option>"); } ; // end fordocument.write('</select><br>');

</script>

</form>

</body>

</html>

As of now I cannot get the Javascript to write/populate the various options, though the javascript in the FMP InLine Action does generate the arrays it seems.

And, do have a particulare favorite JavaScript book or reference for this situation? I can work with example code I think, but am having trouble learning how to write it and work with it myself. And, well, I'd rather not bother you forever... :

in any case

thanks again for your help

Nate

Link to comment
Share on other sites

Hi Garry,

It seems that in this section of code:

<script>

var shows = new Array();

[FMP-Record]

i = 0 ;

var show_shots = new Array() ;

[FMP-Portal: showName]

show_shots[i++] = "[FMP-Field: showName::t_FX Name]";

[/FMP-Portal]

shows("[FMP-Field:t_showName]") = show_shots ;

[/FMP-Record]

</script>

the "[i++]" sections are not populating with numbers. They should be number themselves starting with zero, correct? Maybe that's what the problem is. But, either way, I shall be purchasing my very own copy of the O'Reilly book (or another if it seems to suit my needs).

Nate

Link to comment
Share on other sites

You will not see the i++ values displayed. Only if you write it out to the browser.

The <select> may not be displaying because the main array may be attempting to display another array; as it is an "Associated" array containing an array.

I will have some more time to look at it later this week.

All the best.

Garry

Link to comment
Share on other sites

Hi Garry,

I was finally able to get the whole thing to work using the code below. I pretty much attempted to combine it with another, similar example I found on another website. The code it probably not as "clean" or efficient as it could be because of that, but it works for now until I can better learn JavaScript. Anyways, thanks very much for helping me (I've also learned quite a bit from your posts in other threads). I can't tell you how much I appreciate it.

Nate

<HTML>

<HEAD>

<TITLE></TITLE>

[FMP-InlineAction: -db=shows.fp5, -lay=Form_View, -FindAll]

<SCRIPT langauge=javascript>

var i = 1;

var aLBValues = new Array() ;

[FMP-Record]

aLBValues[i++] = new Array([FMP-Portal: showName]"[FMP-Field: showName::t_FX Name]", [/FMP-Portal]"");

[/FMP-Record]

[/FMP-InlineAction]

function addLBElement(oLB, value, text)

{

var oNewOption = new Option(text) ;

oNewOption.value = value;

oLB.options[oLB.options.length] = oNewOption ;

}

function updateLB()

{

var oLBSource = document.the_form.choose_category ;

var oLBDest = document.the_form.the_examples ;

var nSelId = oLBSource[oLBSource.selectedIndex].value ;

oLBDest.length = 0 ; // Clear the LB

for(nLoop = 0; nLoop < aLBValues[nSelId].length; nLoop++)

{

addLBElement(oLBDest, nLoop, aLBValues[nSelId][nLoop]) ;

}

}

function onLoad()

{

updateLB() ;

}

</SCRIPT>

</HEAD>

<BODY onLoad="onLoad()">

<form name="the_form">

<select name="choose_category" onChange="updateLB()">

[FMP-InlineAction: -db=shows.fp5, -lay=Form_View, -FindAll]

[FMP-Record]

<option value=[FMP-CurrentRecordNumber]>[FMP-Field:t_showName]</option>

[/FMP-Record]

[/FMP-InlineAction]

</select>

<select name="the_examples">

<option>DUMMY VALUES

<option>DUMMY VALUES

<option>DUMMY VALUES

</select>

</form>

</BODY>

</HTML>

Link to comment
Share on other sites

Ok, after a few days I'm back again with another question or two, because, well I'm just having a rocky time learning CDML and JavaScript for my first project I guess.

Anyways, my conditional value list items in the code above submit a number to the database fields from the array rather than the text itself. For example, in

aLBValues["Gabrielle"] = new Array("SIGN1", "THROW3", "");

when ""SIGN1" is slected it submits a "0" rather than the text and "THROW3" submits "1". Is there something I can change to tell it to submit the text instead of the index number?

Also, I need to submit the info to two portal fields. But, JavaScript doesn't like it when I name my select lists using colons. How have folks worked aroung this?

thanks again!

Nate

Link to comment
Share on other sites

Nate,

Try this for assigning values to the array:

var a = ["SIGN1", "THROW3", ""];

aLBValues["Gabrielle"] = a;

I have used square brackets for the initalisation of the Array.

I tried the code below and it printed "SIGN1" to the page:

<body>loading...<br>

<script>

var aLBValues = new Array();

var a = ["SIGN1", "THROW3", ""];

aLBValues["Gabrielle"] = a;

document.write(aLBValues["Gabrielle"][0]);

</script>

</body>


All the best.

Garry

Link to comment
Share on other sites

Hi again,

I changed the code per your suggestions. The value lists work perfectly, and I can get it to write the correct text selection as you showed, but for some reason it still submits the array index for

the "web_shot1" form. At first I thought it might have something to do with the "selectedIndex" part of the line below, but I think this line pertains to the "web_show1 " form.

var nSelId = oLBSource[oLBSource.selectedIndex].text ;

Oh, well. I've pasted the entire script below. Please let me know if anything catches your eye or jumps out at you. But no need to spend too much time on my problem.

Nate

SCRIPT:

<script type="text/javascript" language="JavaScript">

var i = 1 ;

var aLBValues = new Array() ;

[FMP-Record]

var a = [[FMP-Portal: showName]"[FMP-Field: showName::t_FX Name]", [/FMP-Portal]""];

aLBValues["[FMP-Field:t_showName]"] = a;

[/FMP-Record]

[/FMP-InlineAction]

function addLBElement(oLB, value, text)

{

var oNewOption = new Option(text) ;

oNewOption.value = value;

oLB.options[oLB.options.length] = oNewOption ;

}

function updateLB()

{

var oLBSource = document.the_form.web_show1 ;

var oLBDest = document.the_form.web_shot1 ;

var nSelId = oLBSource[oLBSource.selectedIndex].text ;

oLBDest.length = 0 ; // Clear the LB

for(nLoop = 0; nLoop < aLBValues[nSelId].length; nLoop++)

{

addLBElement(oLBDest, nLoop, aLBValues[nSelId][nLoop]) ;

}

}

function onLoad()

{

updateLB() ;

}

</SCRIPT>

Link to comment
Share on other sites

Ugh! My apologies! I replied too soon. I was able to solve the issue. I changed this

var oNewOption = new Option(text) ;

oNewOption.value = value;

to this

var oNewOption = new Option(text) ;

oNewOption.value = text;

Now is submits correctly. Has anyone found any workaround for the portal/javascript conflict?

quote: "Also, I need to submit the info to two portal fields. But, JavaScript doesn't like it when I name my select lists using colons. How have folks worked aroung this?"

thanks for everything

Nate

Link to comment
Share on other sites

Oh, sorry. I should have been more specific. The portal conflict I get is when I name my selects/drop downs. CDML wants me to name them using colons:

<select name="timeCardID::t_shotName.1">

<option value="">DUMMY VALUES

</select>

but Javascript doesn't like it when I write this in the script, I assume because of the colons and periods.

var oLBDest = document.the_form.timeCardID::t_shotName.1 ;

Is there something I can do about this?

Link to comment
Share on other sites

Ok, I'm an idiot. I misread your previous post Gary. Sorry about that. As soon as my brain actually started working, I was able to successfully use the code you wrote. Sorry about that. Problem sovled!

I can't thank you enough for all your time and help

Nate

Link to comment
Share on other sites

  • 3 weeks later...

Garry and Nate,

I've been reading with fascination your discussion of Javascript and CDML to make related value lists on the same screen. I was able to replicate your example...but, what I REALLY need is the ability to create the same process two levels deep instead of one (i.e. - a show is chosen in the first field, a category in the second, and then the item in the third). If you aren't too burnt out on this topic, could you please post the information on how this might be accomplished. Thanks in advance for any help.

Jeff

Link to comment
Share on other sites

Hey Garry,

After further thought, I realized that I may be coming at this the wrong way. Let me give you a brief background. In FM I have created a scheduling program with conditional popup lists for "Department", "Position", and "Employee". This is all done with value lists and works great in FM. But, using CDML, this takes the usual three screens to submit the info back to FM to create the next conditional value list. I was hoping to find a way (possibly using Javascript) to combine this into one step for the user. The problem with using portals instead of value lists is that value lists automatically omit duplicates and portals do not (i.e. - if there are 5 Employees that all have the same Position, the Position will show up 5 times in the popup. Nate's example above does this exact thing). I would be interested in your input into a possible solution and an example if possible. As usual, thank you for your time. You are truly an impressive force on this forum. I look forward to hearing from you.

Jeff

Link to comment
Share on other sites

Jeff,

This is where you begin to use Javascript Arrays of Arrays of Arrays. You will also have to set-up the relationships between items.

How are your Valuelists set-up now; are Position and Employee two related files? Unfortunately, related ValueLists do not work through WebCompanion, hence some other way needs to be devised to establish the relationships.

I will be travelling for the next couple of days. I will have a better chance to look at it on the weekend.

All the best.

Garry

Link to comment
Share on other sites

Hey Garry,

Thanks for replying so quickly. I hope you had a fun trip and it's wasn't all work. Well, here's more information on my setup of files and some background information on what I'd like to do. Employees (Teachers) are entered in the first database "Employee List". Each teacher can belong to multiple departments and teach multiple classes (i.e. a one-to-many relationship of departments and positions) this is related to the file "Employee Department Position" which contains the "Employee Name", "Department" and "Position" fields. Let's say we want to schedule a student taking classes. Once the student information is entered we want to assign classes. On a single screen (right now it takes three screens), we want to select a Department (English), a Position (Literature or Composition - these would only be related values to department), and finally the Employees (teachers) that are teaching that class (Mrs. White or Ms. Green). Right now, I use a combination of value lists and portals for this to work. But, it is time confusing for the people utilizing my site because they have so many steps through different screens. It would be much simpler if they could select all of the conditional popup information on one screen. I utilized value lists instead of portals because it builds lists without repeating values (i.e. - if there are five teachers teaching "Literature", "Literature" won't be in the second menu five times...as it would with portals). So, even though I successfully tried the solution you gave Nate, it wouldn't exactly work in my situation because I would end up with duplicate values in the second popup. What I need explained is: how do I send all of the related permutations for the three popups while eliminating duplicate values? I know that what I'm attempting is very agressive for a first Javascript project, but it would completely change the way I'm approaching this site if this is indeed possible. Once again thanks for all your help on this forum and around this site. I can't relay how much information I have gleened from your participation in the various forums. If you're ever in Las Vegas, make sure and drop me a line. I owe you dinner and a show!

Talk to you soon,

Jeff

Link to comment
Share on other sites

Jeff,

I'm still in Sydney; however looking forward to heading home (Sunshine Coast) on Tuesday :-)

Here is a start for getting all of the values into Javascript Arrays:

	<meta name="generator" content="BBEdit 7.0.1">

	<script>

		// Declare Variables

		var aDept = new Array();

		var aPosn = new Array();

		var aEmp = new Array();

		var i = 0;

		var j = 0;

		var k = 0;

		// Select all values

		[FMP-InlineAction: -db=empdeptposn.fp5, -lay=web, -sortfield=department, -sortfield=position, -sortfield=employee, -max=all, -findall]

		// Assign to Arrays

		[FMP-Record]

		aDept[i++] = "[FMP-Field: department]";

		aPosn[j++] = "[FMP-Field: position]";

		aEmp[k++] = "[FMP-Field: employee]";

		[/FMP-Record]

		// Constuct an Array of the Unique Department names by using a ValueList	

		aMain = new Array();

		[FMP-ValueList:department]

		aMain["[FMP-ValueListitem"] = null;

		[/FMP-ValueList]

		[/FMP-InlineAction]

	</script>

</head>

This code uses an InLineAction to return all of the data. It is then assigned to Javascript arrays. A ValueList is also used to start the setup of the Main array. This ValueList should be created on the Department field and applied on the Layout.

Hope this gets you started.

Garry

Link to comment
Share on other sites

Hey Garry,

Okay! I got the arrays populated with the information from FileMaker (I didn't quite understand the reason for assigning a "null" value to the Department ValueListItem...maybe you could explain a little more in depth). Anyway, it seems to be functioning correctly. Now, if I understand correctly, I need to attach the arrays together, then populate the popups. At what point do we eliminate the duplicates in the "Department" and "Position" popups? Hope you're having a great time. Talk to you soon.

-Jeff

Link to comment
Share on other sites

Garry,

Thanks again for all your help on this. I always find it so exciting to find new and better ways to do things with FileMaker. I've been reading the JavaScript book you suggested to Nate for about a week now and have been very challenged by it. Thank you, as well, for that information. Have a safe trip back.

Talk to you soon,

Jeff

Link to comment
Share on other sites

Jeff,

Here is a little bit more. I am currently working on the allocation to the aMain associative array.

function selPosition()

   {

   alert (document.myform.department.value);

   };

</script>

</head>

<body>....



<form method="post" action="#" name="myform">

<select name="department" onchange="Javascript:selPosition();">

<option value="">Please Select a Department</option>

	[FMP-ValueList:department]

	<option value="[FMP-ValueListItem]">[FMP-ValueListItem]</option>

	[/FMP-ValueList]

</select><br>

<select name="position" onchange="Javascript:selEmployee();">

<option value="">Please Select a Position</option>

</select><br>

<select name="emp_name">

<option value="">Please Select an Employee</option>

</select></form>

This will give you an idea how the Select statements are set-up.

All the best.

Garry

Link to comment
Share on other sites

Hey Garry,

As you well know, that worked like a charm. But I have one question, is the purpose of the "alert" in: "alert (document.myform.department.value)" for the "selPosition" function to reset the Position field if the user has already selected a Position and then went back and changed the Department (error correction)? Or am I way off base.

The next step is the "doozy!" I am anxiously waiting to see how you do it because I have no clue! wink.gif

How was your trip?

Still crazy here in Vegas,

Jeff

Link to comment
Share on other sites

Jeff,

The "alert" is just for testing that the "onchange" is working. Here are those functions with some code to change the contents of the Select lists.

	function selPosition()

			{

			with (document.myform)

                          {

			var nIndex = department.selectedIndex ;

			if (nIndex > 0)

				{

				// Clear the existing Options of Position and Employee

				for (i = position.options.length; i > 0; i--) {

					position.options[i] = null ; } ;

				for (i = emp_name.options.length; i > 0; i--) {

					emp_name.options[i] = null ; } ;

				position.options[1] = new Option("Positions Appear Here") ;

				};

                           };

			};

		function selEmployee()

			{

			with (document.myform)

                          {

			var nIndex = position.selectedIndex ;

			if (nIndex > 0)

				{

				// Clear the existing Options of Employee

				for (i = emp_name.options.length; i > 0; i--) {

					emp_name.options[i] = null ; } ;

				emp_name.options[1] = new Option("Employees Appear Here") ;

				};

                           };

			};

	</script>

</head>

The hard part is the assigning of the Position and Employee values to the aMain associative array. Still working on an elegant solution for that smile.gif

All the best.

Garry

Link to comment
Share on other sites

Hey Garry,

I love Vegas too! Except for all the tourists! wink.gif (heh heh)

Anyway, I plugged in the next code that you sent. I must admit it lost me a little. So I'm cracking open the book and going to break it down line by line to figure it out.

Are you coming to NAB this year? If so, let me know. I'll hook you up with tickets to shows and such. Thanks again for all your help on this. I can't relay how much I've learned over the last few months reading your hundreds of posts. You really scare me sometimes (but in a good way blush.gif ).

I figured the tying together of the arrays would be challenging. I can't wait to see how you do it!

Talk to you soon,

Jeff

Link to comment
Share on other sites

This topic is 7742 days old. Please don't post here. Open a new topic instead.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.