How to add a video in a form
From Business Process Management, BPM and Workflow Automation Wiki | BizAgi BPMS
<keywords content="keywords">add, video, form, userfield, user fields, using user fields, customize fields, customization, forms custom, form customize, personalization of fields, personal attributes</keywords>
How to add a video in a form
In some cases, it might be required to include a video as part of the information in a case. There is a way to implement that requirement in Bizagi, and it is through userfields. This article will describe the step by step to include a video (in flv format) into a form:
1. In order to add an FLV video clip in a Bizagi form, it is necessary to have a FLV player which can be embedded using HTML. For this example, the JW Player is used. The files needed from this player are jwplayer.js and player.swf.
2. Create a folder named jwplayer in the following path of the Bizagi project. C:\Bizagi\Xpress\Projects\PROJECT_NAME\WebApplication\js\
Then copy the player’s files into that folder. After the files are copied, the following files should exist in the right paths:
C:\Bizagi\Xpress\Projects\PROJECT_NAME\WebApplication\js\jwplayer\ jwplayer.js C:\Bizagi\Xpress\Projects\PROJECT_NAME\WebApplication\js\jwplayer\ player.swf
3. In the web application path, create a folder named videos (C:\Bizagi\Xpress\Projects\PROJECT_NAME \WebApplication\videos). The FLV file(s) should be stored in this folder.
4. In Bizagi Studio create an User Field with this code:
FieldResponse.AppendHTML("<div id='container'>Loading the player ...</div>");
FieldResponse.AppendHTML("<script type='text/javascript' src='../../js/jwplayer/jwplayer.js'></script>");
FieldResponse.AppendHTML("<script type='text/javascript'>");
FieldResponse.AppendHTML("jwplayer('container').setup({");
FieldResponse.AppendHTML("flashplayer: '../../js/jwplayer/player.swf',");
FieldResponse.AppendHTML("file: '../../videos/" + FieldResponse.Encode(FieldInfo.Value) + "',");
FieldResponse.AppendHTML("height: 360,");
FieldResponse.AppendHTML("width: 640");
FieldResponse.AppendHTML("});");
FieldResponse.AppendHTML("</script>");
5. This code assumes that the attribute used for the render will contain the name of the video file, so the attribute’s value must be set before the User Field is rendered. In this example, a Combo is associated to a Parameter entity where there are several names of video files associated to it. The Combo property Submit on Change is set to True because an Expression is going to be included for the User Field. The Expression must be executed every time a new value in the Combo is selected.
6. The Combo will also have an Action to hide the User Field if there is no value selected.
7.For the User Field render, an Expression will be configured in the Required property which will be used to set the value of the attribute associated with the User Field.
8. The code in the Expression is displayed in the image below. It is important to know that for any Expression used in the Visual Settings (Visible, Editable or Required) of a render, the last statement must be a true or a false, which will indicate the value for that visual setting.
9. The final result in the user portal will be:
