Custom Pod - Collecting additional participant information

Hello all!

After much research and digging through multiple forums and tutorials I have come to the conclusion that private development of custom pods for Flash-based Connect is pretty much non-existent. Or maybe it's just that no one is posting their efforts. I understand why, but this is a current need for me. I used to be pretty decent at Flash and ActionScript, but that was many years ago. I do still, however, have a pretty good grasp of how things work and can eventually figure out how code is implemented after looking at examples of other's code. With COVID-19 causing my organization to almost completely be on telework status, we have been directed to do a lot of training online using Connect. This has given me the opportunity to re-learn some of the coding skills I used to have 🙂

I thought I would share a "custom" pod I've been working on and where I am currently at with it's development in hopes that it will help others who are looking to implement custom pods into Connect. I am by no means an expert on any of this, so what I say below is my interpretation of the code I am using and how I implemented it into my application.

So, a little background on why I needed/wanted this pod. The pod is a Frankensteined version of the excellent Chat Pod tutorial by Easel Solutions. I took the basic structure of the chat pod and used it to create a pod that allows me to gather some additional information from Attendees such as Full name, their work area, email address, and phone number. It's basically used as a Sign In Roster to capture a list of who attended a meeting. I know I can pull a report after the meeting, but I wanted just a little more info than what that provided and what I have access to. In addition to capturing the information on the screen I wanted to be able to download/save the data to a CSV file for verification of attendance after the meeting was over.

Another reason I am posting this is that I would like some feedback on my coding and to ask for some assistance on polishing it up a little more. It works as it is, but there are some things that I'd like to do better and just can't seem to figure out how to make it happen.

Here is a breakdown of what I have done so far and how it currently functions:

- Like I said, it's basically a chat pod with additional capability.

- Where an Attendee would normally just enter some chat text in a box I changed the text input area to capture additional information and display this in the main chat window.

- It looks like this:
First Name Last Name
Division
Branch
Email
Phone Number

- The information is synced across all screens
- There are Submit, Clear, and Export buttons
- When Attendees enter their info, the text in the boxes goes away and the main display auto scrolls to the bottom to give a bit of verification their info was accepted.

The things I would like to improve upon are:

Currently Attendees/Participants can see, and use, the Clear and Export buttons. I would like to be able to hide or disable these two buttons and only allow Hosts to see/use them. I can make the Clear button only function on the Participant side using "allowParticipantPublish", but it would be nice to remove the button from just their screen. I have not figured out how to implement the "allowParticipantPublish" function for the Export button. As of now Attendees can download the data.

Another issue I am having is I have added a "tabIndex" to each of the Text Input fields. For some reason this only works on the Host level and not Participant level.

I will post my code below. Any input, comments, criticisms, advice, help, etc that anyone can provide is much appreciated.

Thanks,
Justin

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				width="100%" height="100%" xmlns:components="com.adobe.sync.components.*"
				backgroundColor="0xffffff">
	<mx:Script>
		<![CDATA[
			import com.adobe.sync.events.SyncSwfEvent;
			
			protected function syncMessageReceived(event:SyncSwfEvent):void
			{
				if(event.data.msgNm == "update")
				{
					updateLog(event.data.msgVal);
				}
				if(event.data.msgNm == "clear")
				{
					clearLog(event.data.msgVal);
				}
				
			}
			
			//Function to sync input data to screen and clear input fields after clicking Submit button
			protected function sendMessage(event:MouseEvent):void
			{
				var customMessage:String = fName.text + " " + lName.text + "\r" + division.text + "\r" + branch.text + "\r" + email.text + " \r" + phone.text + "\r\r";
				
				updateLog(customMessage);
				fName.text = "";
				lName.text = "";
				division.text = "";
				branch.text = "";
				email.text = "";
				phone.text = "";
				connector.dispatchSyncMessage("update", customMessage, true)
				connector.allowParticipantPublish("update", true);
			}
			//Function to allow Hosts to clear screen and prevent Participants from clearing everyone's screen when clicking Clear button.
			protected function sendClear(event:MouseEvent):void
			{
				var customMessage:String = "";
				clearLog(customMessage);
				connector.dispatchSyncMessage("clear", customMessage, true)
				connector.allowParticipantPublish("clear", false);
			}
			
			//Updates the screen with user entries and autoscrolls to bottom of screen
			protected function updateLog(message:String) :void
			{
				log.text += message + "";
				autoscroll();
				
			}
			
			//Positions scrollbar at bottom of screen after each entry
			protected function autoscroll():void
			{
				setTimeout(function():void
				{log.verticalScrollPosition = log.maxVerticalScrollPosition;},100);
			}
			
			//Clears the screen after clicking Clear button
			protected function clearLog(message:String) :void
			{
				log.text = ""; 
			}
			//Generates save dialog for csv file listing all entries after clicking Export button
			protected function sendExport(event:MouseEvent) :void
			{
				var file:FileReference = new FileReference();
				file.save(log.text, "roster.csv");
			}
			
		]]>
	</mx:Script>
	
	<components:SyncConnector id="connector" syncMessageReceived="syncMessageReceived(event)" />
	<!--The below line should be enabled for local sync testing only-->
	<!--<components:ConnectionEmulator bSyncConnector="{connector}" />-->
	
	<mx:Panel title="Sign In Roster" top="5" right="5" bottom="5" left="5" layout="vertical" >
		<mx:TextArea id="log" width="100%" height="100%" editable="false" />
		<mx:HBox width="100%">
			<mx:Text text="First Name" width="100"/>
			<mx:TextInput tabIndex="1" id="fName" width="20%" />
			<mx:Text text="Last Name" />
			<mx:TextInput tabIndex="2" id="lName" width="20%" />
		</mx:HBox>
		<mx:HBox>
			<mx:Text text="Division" width="100"/>
			<mx:TextInput tabIndex="3" id="division" width="25%" />
			<mx:Text text="Branch" />
			<mx:TextInput tabIndex="4" id="branch" width="20%" />
		</mx:HBox>
		<mx:HBox>
			<mx:Text text="Email" width="100"/>
			<mx:TextInput tabIndex="5" id="email" width="45%" />
			<mx:Text text="Phone #" />
			<mx:TextInput tabIndex="6" id="phone" width="20%" />
			<mx:Button label="Submit" click="sendMessage(event)" />
			<mx:Button label="Clear"  click="sendClear(event)" />
			<mx:Button label="Export"  click="sendExport(event)" />
		</mx:HBox>
		<mx:HBox>
			<mx:Text text=""/>
		</mx:HBox>
	</mx:Panel>
	
</mx:Application>