Upload images in questionnaire
Contents
Introduction
We have a client who wants respondents to be able to upload images in a questionnaire
Solution
When the recipient open the answer sheet to answer, we will create the new folder whose name is recipient's name under the questionnaire then store the images that the he uploads in the image tab of this new created folder.
How to do it
Requirement
- The user template of the recipients must have the navigation access to open the Image tab of the Folder and upload the images in this image tab.
Step 1: Preparation
- In the group list, create the group containing the recipients and grant the needed navigation accesses to this group
- In the folder list, create the folder containing all the recipient's folder.
- Check the folder template resource id that the folder will use.
Step 2: Create the new folder for the recipient
(You can see the script in the workflow whose resource id is 45408 in cg.catglobe.com)
1 array para = Workflow_getParameters();
2 number userId = para[0];
3
4 number ImageFolderResourceId = 45406;
5 number FolderTemplateResourceId = 2071;
6
7 array newFolder ;
8 number userResourceId = User_getResourceIdFromUserId(userId);
9 array userinfo = User_getUserByResourceId(userResourceId);
10 string ExistedFolderName = getNameFromResourceUniqueId(ImageFolderResourceId) + "\\"+ userinfo[USER_NAME];
11 array ExistedFolder = Folder_getFolderByName(ExistedFolderName);
12
13 if (ExistedFolder == empty)
14 {
15 newFolder = Folder_new(userinfo[USER_NAME],FolderTemplateResourceId ,ImageFolderResourceId);
16 Folder_save(newFolder);
17 }
18 else
19 {
20 newFolder = ExistedFolder ;
21 }
22 array permissions = {{userId , "FullControl"}};
23 updateUserPermission(newFolder[FOLDER_RESOURCE_ID], permissions);
24 string guid = getResourceGuid(newFolder[FOLDER_RESOURCE_ID]);
25 return getResourceIdFromGuid(guid);
Step 3: Set up the questionnaire
(You can see the questionnaire whose resource id is 1219174 in cg.catglobe.com)
Step 3.1 : Create the dummy question for storing the folder id
We will call the workflow in step 2 to get the new created folder id of recipient
Step 3.2 : Add the following script to the questionnaire
Paste this code below into Javascript tab of the questionnaire
1 /*---------------------------------------------------------------------------------------------------------------
2 Server info
3 ---------------------------------------------------------------------------------------------------------------*/
4 var ServerInfo =
5 {
6 "rootPath" : window.location.protocol+"//"+window.location.host
7 }
8
9
10 /*---------------------------------------------------------------------------------------------------------------
11 ResourceType enumeration
12 ---------------------------------------------------------------------------------------------------------------*/
13 var ResourceType =
14 {
15 "Folder":"Folder"
16 };
17
18
19 //
20 // IFrame
21 //
22 function IFrame(parentElement)
23 {
24 // Create the iframe which will be returned
25 var iframe = document.createElement("iframe");
26
27 // If no parent element is specified then use body as the parent element
28 if(parentElement == null)
29 parentElement = document.body;
30
31 // This is necessary in order to initialize the document inside the iframe
32 parentElement.appendChild(iframe);
33
34 // Get the document object of the IFrame
35 iframe.getDocument = function()
36 {
37 // Depending on browser platform get the iframe's document, this is only
38 // available if the iframe has already been appended to an element which
39 // has been added to the document
40
41 var doc;
42
43 if(this.contentDocument)
44 // Firefox, Opera
45 doc = this.contentDocument;
46 else if(this.contentWindow)
47 // Internet Explorer
48 doc = this.contentWindow.document;
49 else if(this.document)
50 // Others?
51 doc = this.document;
52
53 // If we did not succeed in finding the document then throw an exception
54 if(doc == null)
55 throw "Document not found, append the parent element to the DOM before creating the IFrame";
56
57 return doc;
58 }
59
60 // Set iframe source
61 iframe.setSource = function(src)
62 {
63 // Set the source
64 this.src = src;
65
66 // Initialize the iframe's document
67 this.doc = this.getDocument();
68
69 // Open and close the iframe's document, this will allow us to manipulate
70 // the iframe's contents by script
71 iframe.doc.open();
72 iframe.doc.close();
73 }
74 // Set iframe source
75 iframe.setWidth = function(width)
76 {
77 // Set the width
78 this.width = width;
79 }
80 // Set iframe source
81 iframe.setHeight = function(height)
82 {
83 // Set the height
84 this.height = height;
85 }
86
87 // Initiate the iframe's document property
88 iframe.doc = iframe.getDocument();
89
90 // Open and close the iframe's document, this will allow us to manipulate
91 // the iframe's contents by script
92 iframe.doc.open();
93 iframe.doc.close();
94
95 // Return the iframe, now with an extra property iframe.doc containing the
96 // iframe's document
97 return iframe;
98 }
99
100 /*---------------------------------------------------------------------------------------------------------------
101 AttachmentList question control
102 ---------------------------------------------------------------------------------------------------------------*/
103
104 function ImageList(elementContainer, width,height,viewimage)
105 {
106 this._elementContainer = elementContainer;
107 this._iframe = new IFrame(this._elementContainer);
108 $(this._iframe)
109 .attr("id", "ImageListIFrame")
110 .bind("load",
111 function()
112 {
113 if(this.src == '')
114 return;
115 if (viewimage == "off")
116 {
117 $('#ImageListIFrame').contents().find('#ImagesximageGrid_main').hide();
118 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_1').hide();
119 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_2').hide();
120 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_3').hide();
121
122 }
123 else
124 {
125 $('#ImageListIFrame').contents().find('#Imagesxtoolbar').hide();
126 $('#ImageListIFrame').contents().find('#ImagesximageGrid_c_0_2').hide();
127 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_0_2').hide();
128 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_1_2').hide();
129 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_2_2').hide();
130 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_3_2').hide();
131 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_4_2').hide();
132 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_5_2').hide();
133 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_6_2').hide();
134 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_7_2').hide();
135 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_8_2').hide();
136 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_9_2').hide();
137 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_10_2').hide();
138 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_11_2').hide();
139 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_12_2').hide();
140 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_13_2').hide();
141 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_14_2').hide();
142 $('#ImageListIFrame').contents().find('#ImagesximageGrid_rc_15_2').hide();
143 }
144 });
145 if (width != null)
146 this._iframe.setWidth(width);
147 if (height != null)
148 this._iframe.setHeight(height);
149 }
150
151 //ImageList.path = "{rootPath}/Common/Resources/View/ContainerPage.aspx?tabtype=Images&type={type}&id={id}&isportal=false";
152 ImageList.path = "{rootPath}/Common/Resources/View/ContainerPage.aspx?tabtype=Images&type={type}&id={id}&isportal=false";
153
154 ImageList.prototype =
155 {
156
157 createImageListUrl: function(type, id)
158 {
159 return ImageList.path
160 .replace("{rootPath}", ServerInfo.rootPath)
161 .replace("{type}", type)
162 .replace("{id}", id);
163 },
164
165 setFolderId: function(FolderId)
166 {
167 $(this._iframe)
168 .attr("src", this.createImageListUrl(ResourceType.Folder, FolderId));
169 },
170
171 getImages: function()
172 {
173 var Name = 1;
174 var nameList = new Array();
175
176 with(this._iframe.contentWindow)
177 {
178
179
180
181 var grid = getCGExecuter().getGridUtilities().getGrid(__gridClientId);
182
183 for (var rowIndex = 0; rowIndex <grid.Rows.length; rowIndex ++)
184 {
185
186 nameList.push(grid.Rows.rows[rowIndex].getCell(Name).getValue());
187
188 }
189 }
190
191 return nameList;
192 },
193 /* getGUIDs: function()
194 {
195 var Name = 2;
196 var nameList = new Array();
197
198 with(this._iframe.contentWindow)
199 {
200
201
202 var grid = getCGExecuter().getGridUtilities().getGrid(__gridClientId);
203 var guidtext;
204 for (var rowIndex = 0; rowIndex <grid.Rows.length; rowIndex ++)
205 {
206 guid = grid.Rows.rows[rowIndex].getCell(Name).getValue();
207 nameList.push(jQuery.trim(guid.split('<a')[0]));
208
209 }
210 }
211
212 return nameList;
213 }
214 */
215 getGUIDs: function()
216 {
217 var Name = 2;
218 var nameList = new Array();
219 with(this._iframe.contentWindow)
220 {
221
222 guid = '{{D_GUID}}';
223 alert("nham"+guid);
224 nameList.push(jQuery.trim(guid.split('<a')[0]));
225 }
226 return nameList;
227 }
228 }
229 /*---------------------------------------------------------------------------------------------------------------
230 End JAVA_SCRIPT of QUESTIONNAIRE
231 ---------------------------------------------------------------------------------------------------------------*/
Step 3.3 : Create the question for showing the upload form
Paste this code below into Javascript tab of that question
1 /*-------------------------------------------------------------------------
2 Set initial information for the uploading image
3 -------------------------------------------------------------------------*/
4 quest.onInit = function()
5 {
6 quest.ImageList = new ImageList($("#attachmentContainer").get(0), "800px","400px" );
7 quest.ImageList.setFolderId('{{D_Current_Folder_Id}}');
8 $("#attachmentContainer").append($("<input name='QUESTION.D_Image_Guid' type='hidden'>"));
9 }
10
11 /*-------------------------------------------------------------------------
12 - Validate the question. Automaticaly called.
13 - You must upload at least 1 image
14 -------------------------------------------------------------------------*/
15 function questioncheck()
16 {
17 // Subscription form valid variable
18 var valid = true;
19 ErrorMessages.getInstance().clearErrorMessages();
20 var list = quest.ImageList.getImages();
21 if (list.length < 1)
22 {
23 ErrorMessages.getInstance().showErrorMessage('You must upload at least 1 image.');
24 valid = false;
25 }
26 // Return result of validation
27 var getGuid = quest.ImageList.getGUIDs();
28 $("input[name$='QUESTION.D_Image_Guid']").val(getGuid);
29 return valid;
30 }
31
32 /*---------------------------------------------------------------------------------------------------------------
33 End JAVA_SCRIPT of QUESTION Insert_Image
34 ---------------------------------------------------------------------------------------------------------------*/
Source
Questionnaire Resource Id on cg.catglobe.com site: 75216
