• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Custom Pod - Collecting additional participant information

Community Beginner ,
Apr 24, 2020 Apr 24, 2020

Copy link to clipboard

Copied

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>

 

Views

652

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 24, 2020 Apr 24, 2020

Copy link to clipboard

Copied

It's fun to see something being developed for Connect, even if it is in Flash. 

That said, I'd recommend you look at developing this for the HTML version of Connect, as the Flash client will likely be rendered obsolete with the next release of Connect. So rather than spending your time getting this application to work perfectly just to have it not work at all, move on to HTML. That is what groups like CoSo Cloud have decided to do. 

If you need access to the HTML SDK, which isn't fully baked, to start doing some testing and development, please PM me and I'll see what I can do to get you access to what you need.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 24, 2020 Apr 24, 2020

Copy link to clipboard

Copied

PM sent 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 29, 2020 May 29, 2020

Copy link to clipboard

Copied

Hı,

I am a developer and I am searching documents for custom pod development.

As far as understand Platform is moving to html.

Can you help me about developing custom pod documentation.

 

Thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 27, 2020 Aug 27, 2020

Copy link to clipboard

Copied

LATEST

I would also be interested in any documentation on how to get started.

 

Interested in create a hybrid custom pod for both HTML + Flash clients.

 

I am not using Flex, but Adobe Animate - any recommendation on this?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines