Flex Charts with Defined Colors

This tutorial will show you how to create  chart programmatically out of an XML file with filling colors.Step1 :Create Country.xml with the following data and upload into <src> folder

<item Country= “USA” Gold=”35″ Silver=”39″ Bronze=”29″/>
<item Country= “China” Gold=”32″ Silver=”17″ Bronze=”14″/>
<item Country= “Russia” Gold=”27″ Silver=”27″ Bronze=”38″/>

Step2: Load Country.xml and convert it to XMLList

ColumnSeries: Defines a data series for a ColumnChart control.
CategoryAxis: CategoryAxis class to define a set of labels that appear along an axis of a chart.
setStyle: Sets a style property on any component instance. Here setStyle has been used to define the colors for each series
Color Codes which are applied for the Charts below


<?xml version=”1.0″ encoding=”utf-8″?><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute” creationComplete=”createComplete(event)”><mx:Script><![CDATA[

import mx.charts.CategoryAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.ColumnChart;

var MainXML:URLLoader=new URLLoader(new URLRequest(“Country.XML”))

private function LoadCountry(e:Event):void

var CL:XML=new XML(e.target.data)
var CountryList:XMLList=new XMLList(CL.item)
var IColumn1:ColumnChart=new ColumnChart();

//Setting Horizontal Axis
var xAxis:CategoryAxis=new CategoryAxis()
xAxis.categoryField =”@Country”

//Column Serier for Silver

var NS:ColumnSeries= new ColumnSeries();
NS.yField = “@Silver”;
NS.setStyle(“fill”,”0x1b6528″) // Filling Color to the columnseries

IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to
an array)

//Column Serier for Bronze
var NS:ColumnSeries= new ColumnSeries();
NS.yField = “@Bronze”;
NS.setStyle(“fill”,”0x7cba87″) // Filling Color to the columnseries

IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to
an array)

//Column Serier for Gold

var NS:ColumnSeries = new ColumnSeries();
NS.yField = “@Gold”;
NS.setStyle(“fill”,”0x26b540″) // Filling Color to the columnseries
IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to an array)addChild(IColumn1)

You typically use the CategoryAxis class to define a set of labels that
appear along an axis of a chart


XSLT Formulas

Multi Level Dropdowns in NewForm

Below tutorial shows how to use Formulas in XSLT

Step1 : Insert DataView Web Part. Select the List you wanted to show it in XSLT
and Click on Show Data

Step 2: Select the Columns would like to display and click on Insert Selected
Fields as -> Multiple Item View [This will query all the Records] -> Single Item
View [Query only one Single Record]

Step 3: It will display the below columns. Click on DataView Properties

Step4: Select Show View footer

Step5: Count(/dsQuery/Response/Rows/Row) – This will give the no of records
sum(/dsQuery/Response/Rows/Row/<@ColumnName>) – This will do the summation of
all the values on columnName . Likewise the following operators can be used in
XSLT (average(), ceiling(), floor(), max(), min(), number(), random(), etc..)

Count : <xsl:value-of select="count(/dsQueryResponse/Rows/Row)" />
<br />
Collateral : <xsl:value-of select="sum(/dsQueryResponse/Rows/Row/@Collateral)"
<br />
Web Designing : <xsl:value-of select="sum(/dsQueryResponse/Rows/Row/@Web_x0020_Designing)"


Palm App : Basic App

Multi Level Dropdowns in NewForm

Step 1: In Eclipse, New -> Project -> Select Basic Application

Step 2: Provide the Project /App Name [Id for the app name wil be
for the below application [com.mycompany.firstapp] is the ID. Version no: 1.0.0

Folder Contents

app folder—Contains the assistants, models, and views that make
up the application. Later in the tutorial, you add files to this
images folder—Any other images the application uses.
stylesheets folder—Contains the cascading style sheet file for
the application.
appinfo.json—The Application Information file.
icon.png—The image that the application presents in the Launcher
on the emulator or device.
index.html—The main stage on which the application’s scenes
sources.json—A list of the source files for each scene.

Application Information

  "id": "com.mycompany.firstapp",
  "version": "1.0.0",
  "vendor": "My Company",
  "type": "web",
  "main": "index.html",
  "title": "First App",
  "icon": "icon.png"

Step 3: Creating a scene for app
A scene is a formatted screen for presenting information or a task to the user.
Each scene has a view and an assistant. The view determines the layout and
appearance of the scene. The assistant determines the behavior(Like Event
Listener for any buttons or Checkboxes].

/app/assistants/Scene1-assistant.js —This is the assistant.
/app/views/first/Scene1-scene.html —This is the view.
sources.json —This file now includes JSON information that binds
Scene1-assistant.js to the Scene1 scene.

Step 4: Open palm web OS Emulator before debugging any app.

Step 5: Open Scene1-scene.html and replace the content with the following

<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text">Hello World</div>

Step6 : Debug as Mojo Application – It detects the emulator
automatically and opens the debugged version of App.

Now you can see the Blank app though the codes have put in to show hello world.

Step7: To Show the scene, you must tell the stage to push the "scene1".
So need to add a code to push scene1 to the stage. Stage-assistant.js is the
file manages the entire stage of app.

1. Open stage-assistant.js.
2. Edit the StageAssistant.prototype.setup call to look like below:

Step8: Debug the App again.


Interlink two Custom lists Library (Project Tracker)

Multi Level Dropdowns in NewForm

Below tutorial shows how to inter link two custom lists with ID as a Key. I
have taken project logs as an Example

Pictorial View of how the mapping is going to be done with two custom lists

ID from Project Details list and Project ID from Project Logs list are the key
for mapping, where ID from project Details is autogenerateed

Step 1: Create Project Details List with Columns Project Title and Project

Step 2: Create Project Logs with Columns Module ,  Hrs Spent and

Step 3: The logs creation can be done after the ID been created for each Record.
So including the log entry in Newform.aspx is not possible until you have some
Idea to generate unique IDs. So here log entry has been given in the
Dispform.aspx for each project details.

Step4: Open Dispform.aspx of Project Details and Insert a HyperLink below the
form saying "Add Log"
    Each Project Details have ID generated.
    ID is the key for the logs.
    For every log entry ID been stored in Project ID in Projects
Logs List

Step5: Add Log Link should be customized based on the Project Selected. (Example
: /NewForm.aspx?ProjectID=<ID>)

Step6: ID needs to be fetched from the URL and Concatenate with the Add Log Link
using the javascript below

<script type="text/javascript">
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
document.write(‘<a href="<sharePoint Link>/Lists/Project
Logs/NewForm.aspx?ProjectID=’+ querySt("ID") +’&Source=<sharePoint
Link>/Lists/Project Details/DispForm.aspx?ID=’+ querySt("ID") +’">Add a

Step 7: Pass ProjectID from Hyperlink to the Project ID text box to create a
mapping between project and it logs.

Step8: Put the below javascript inside Newform.aspx of Project Logs to grab the
ProjectID value from Hyperlink and put it inside Project ID Textbox. Get the ID
for the textbox through "View Source" or Select /Copy
dropdown from Browser and paste it in SharePoint Designer /Front Page/
Dreamweaver to get the ID.

<script type="text/javascript">

function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];


Step 9: Now the Entire Project ID <tr> needs to be hidden from the user in order
to avoid the mapping problem. Below javascript code helps to hide the entire TR
of project ID

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


function findacontrol(FieldName) {

var arr = document.getElementsByTagName("!");
// get all comments
for (var i=0;i < arr.length; i++ )
// now match the field name
if (arr[i].innerHTML.indexOf(FieldName) > 0)
{ return arr[i]; }

function hideFields() {
var control = findacontrol("Project ID");

Step 10: Once submitted, it comes back to Dispform.aspx of Project Details
list. Need to include logs below the project display.

Step 11: Insert ->SharePoint Controls -> WebPart -> Project Logs   
and Convert to XSLT View

Step11: Remove Toolbars from Project Logs.

Step12: Filter the logs based on the ID. After the webpart been converted to
XSLT, Create a parameter that will hold the ID from hyperlink. Below screen
shows how to create a parameter to hold ID value using Query String.

Step 13: Filter Project ID from Project Logs with the Parameter(ProjectID)

Show Columns in Newform.aspx based on Dropdown Selection

Multi Level Dropdowns in NewForm

In the below tutorial, i have two different set of Columns. Based on the
dropdown selection , I will show the set of columns for user to be filled in.

Step 1: Open Newform.aspx / Editform.aspx in SharePoint Designer.

Step 2: Close Webpart

Step 3: Insert -> SharePoint Controls -> Custom List Form

Step 4: Arrange Respective Team Columns into div tags or table tags with
Unique IDs

Step 5:Create one javascript file[main.js] and include in newform.aspx
    <script language="javascript" src="/Images/Main.js"></script>

Step6:  Remove those respective columns and organize into one Table or Div
with ID and by default

<td colspan="2">
<table cellpadding="0" cellspacing="0" id="Team1"
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Team1-TitleColumn<span class="ms-formvalidation"></span>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New"
FieldName="Title" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff2′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Title’)}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}"
FieldName="Title" ControlMode="New"/>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New"
FieldName="Team1_x002d_DescColumn" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff3′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Team1_x002d_DescColumn’)}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}"
FieldName="Team1_x002d_DescColumn" ControlMode="New"/>


Step 8: Get the ID for the dropdown through "View Source" or Select /Copy
dropdown from Browser and paste it in SharePoint Designer /Front Page/
Dreamweaver to get the ID.

Screen 1: Select and Copy from Browser

Screen2 : Paste it in SharePoint Designer

So the ID will be

Step 9: Javascript code[Main.js] – Attach Event Listener to the Dropdown, So
onchange / onClick of the dropdown list. Respective team columns should be shown
/ Hiden


function ShowTeam()
w = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").selectedIndex;
var PL = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").options[w].text;

// Hidding all Teams Columns

//Showing only the team which has been selected

Step 9: Change dropdown value