Difference between revisions of "Forms Language Bar"
From All n One's bxp software Wixi
Philip Lacey (talk | contribs) |
Philip Lacey (talk | contribs) |
||
| Line 26: | Line 26: | ||
* Add a Simple - List Menu and give it the name "What is your favourite colour?" | * Add a Simple - List Menu and give it the name "What is your favourite colour?" | ||
* Add three options to the drop down list "Red" "Green" and "Blue" | * Add three options to the drop down list "Red" "Green" and "Blue" | ||
| − | * Edit the Vertical Delivery Options and after the default "How can I help?" add "<br /><div id= | + | * Edit the Vertical Delivery Options and after the default "How can I help?" add "<br /><div id='strOpening'></div>" |
| − | * Edit the title block and add to the notes "<div id= | + | * Edit the title block and add to the notes "<div id='strName'></div>" |
| − | * Edit the phone number question and add to the notes "<div id= | + | * Edit the phone number question and add to the notes "<div id='strNumber'></div>" |
| − | * Edit the list menu quetsion and add to the notes "<div id= | + | * Edit the list menu quetsion and add to the notes "<div id='strColour'></div>" |
| Line 182: | Line 182: | ||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
| − | <div id= | + | <div id='strOpening'>Good --period--. My name is --firstname--. How can I help?</div><br /> |
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 10:39, 20 August 2015
Contents
1 Overview
It is possible within a form to include language changing options. This article demonstrates how that can be built.
2 Initial form
Firstly build a form. This can be done numerous ways. For this example a simple one was built with the following questions in the following order.
Main Menu > Form Management > Form Primary Management > Form - Create
- Name: Language Demonstration
- Type: Blended
Then
- Review the build
- Edit the first section group and change the name to "Welcome to the Language Demonstration form"
- Add a generic area
- Add a Complex - Title and give it the name "Can I ask your name please?"
- Add a Simple - Text Box and give it the name "Can I get a phone number please?"
- Add a Simple - List Menu and give it the name "What is your favourite colour?"
- Add three options to the drop down list "Red" "Green" and "Blue"
- Edit the Vertical Delivery Options and after the default "How can I help?" add "
" - Edit the title block and add to the notes ""
- Edit the phone number question and add to the notes ""
- Edit the list menu quetsion and add to the notes ""
This sets up all the elements which are going to be managed. The form should look like
3 Building a bar
Next bit is to build a bar which will represent the language changing buttons.
Each language has its own button. Each button has a unique name. We style it with bxp default styling. We set the width of the button so the total of all buttons is slightly less than 100% so that all the buttons fit in one row. We then add a JavaScript function which will change the language appropriately.
The below example puts each button on a separate line for clarity.
<div style="width:100%;text-align:center;">
<input type="button" name="btnEnglish" id="btnEnglish" value="English" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('EN');" />
<input type="button" name="btnIrish" id="btnIrish" value="Gaelige" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('IE');" />
<input type="button" name="btnFrench" id="btnFrench" value="Français" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('FR');" />
<input type="button" name="btnSpanish" id="btnSpanish" value="Español" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('ES');" />
<input type="button" name="btnGerman" id="btnGerman" value="Deutsche" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('DE');" />
<input type="button" name="btnPortugese" id="btnPortugese" value="Portugueses" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PT');" />
<input type="button" name="btnPolish" id="btnPolish" value="Polskie" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PL');" />
</div>
In the system, this is just one long continuous string. Put it into the "notes" of the Language Bar generic area.
<div style="text-align:center;"><input type="button" name="btnEnglish" id="btnEnglish" value="English" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('EN');" /><input type="button" name="btnIrish" id="btnIrish" value="Gaelige" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('IE');" /><input type="button" name="btnFrench" id="btnFrench" value="Français" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('FR');" /><input type="button" name="btnSpanish" id="btnSpanish" value="Español" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('ES');" /><input type="button" name="btnGerman" id="btnGerman" value="Deutsche" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('DE');" /><input type="button" name="btnPortugese" id="btnPortugese" value="Portugueses" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PT');" /><input type="button" name="btnPolish" id="btnPolish" value="Polskie" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PL');" /></div>
With the buttons in place the form should look like.
If you want to make it prettier, you can use flag buttons instead. These images came from the team at http://www.icons-land.com. The images also get a border = 0 so that the link doesn't put an extra border around the image.
<div style="width:100%;text-align:center;">
<a href="#" onclick="fn_LanguageChange('US');" title="English" ><img src="https://ww3.allnone.ie/images/flags/US.png" height="64" width="64" border="0" alt="English" /></a>
<a href="#" onclick="fn_LanguageChange('IE');" title="Gaelige" ><img src="https://ww3.allnone.ie/images/flags/IE.png" height="64" width="64" border="0" alt="Gaelige" /></a>
<a href="#" onclick="fn_LanguageChange('FR');" title="Français" ><img src="https://ww3.allnone.ie/images/flags/FR.png" height="64" width="64" border="0" alt="Français" /></a>
<a href="#" onclick="fn_LanguageChange('ES');" title="Español" ><img src="https://ww3.allnone.ie/images/flags/ES.png" height="64" width="64" border="0" alt="Español" /></a>
<a href="#" onclick="fn_LanguageChange('DE');" title="Deutsche" ><img src="https://ww3.allnone.ie/images/flags/DE.png" height="64" width="64" border="0" alt="Deutsche" /></a>
<a href="#" onclick="fn_LanguageChange('PT');" title="Portugueses" ><img src="https://ww3.allnone.ie/images/flags/PT.png" height="64" width="64" border="0" alt="Portugueses" /></a>
<a href="#" onclick="fn_LanguageChange('PL');" title="Polskie" ><img src="https://ww3.allnone.ie/images/flags/PL.png" height="64" width="64" border="0" alt="Polskie" /></a>
</div>It should end up looking like
4 The language function
The next part is to put in place the JavaScript function to do the languages. This goes into the Vertical Delivery Options, in the Opening Script, just under the div you added earlier.
<script type="text/javascript" language="javascript">
function fn_LanguageChange(strLanguage){
//List out all the items to be changed
var strOpening = document.getElementById('strOpening');
var strName = document.getElementById('strName');
var strNumber = document.getElementById('strNumber');
var strColour = document.getElementById('strColour');
//Now we adapt the strings for each language
if (strLanguage == 'US'){
strOpening.innerHTML = 'a';
strName.innerHTML = 'a';
strNumber.innerHTML = 'a';
strColour.innerHTML = 'a';
}
else if (strLanguage == 'IE'){
strOpening.innerHTML = 'b';
strName.innerHTML = 'b';
strNumber.innerHTML = 'b';
strColour.innerHTML = 'b';
}
else if (strLanguage == 'FR'){
strOpening.innerHTML = 'c';
strName.innerHTML = 'c';
strNumber.innerHTML = 'c';
strColour.innerHTML = 'c';
}
else if (strLanguage == 'ES'){
strOpening.innerHTML = 'd';
strName.innerHTML = 'd';
strNumber.innerHTML = 'd';
strColour.innerHTML = 'd';
}
else if (strLanguage == 'DE'){
strOpening.innerHTML = 'e';
strName.innerHTML = 'e';
strNumber.innerHTML = 'e';
strColour.innerHTML = 'e';
}
else if (strLanguage == 'PT'){
strOpening.innerHTML = 'f';
strName.innerHTML = 'f';
strNumber.innerHTML = 'f';
strColour.innerHTML = 'f';
}
else if (strLanguage == 'PL'){
strOpening.innerHTML = 'g';
strName.innerHTML = 'g';
strNumber.innerHTML = 'g';
strColour.innerHTML = 'g';
}
}
</script>
Now if you click the different buttons you get the following type screen.
5 Tweaking the script
Now that you can see how your language bar is going to work, we tweak each of the areas.
5.1 Opening script
Move the div around the opening script instead of being after it.
<div id='strOpening'>Good --period--. My name is --firstname--. How can I help?</div><br />
On the page is a hidden variable called strBEDisplayed_Username.
There is also another one called dteCCL_782_StartDateTime. From the StartDateTime, we can work out the period.
5.2 Questions
5.2.1 Can I ask your name please
Move the div around the Question, instead of in the Notes.
You'll notice the field headings are in English. Right click on one of them and choose "Inspect Element". This will give you an Id for the td.
E.g. our form is 782, so we get.
<tr>
<td width="13%" id="objHeading_strCDA_782_field_0_2">Title</td>
<td width="28%" id="objHeading_strCDA_782_field_1_2">Firstname</td>
<td width="13%" id="objHeading_strCDA_782_field_2_2">Initial</td>
<td width="28%" id="objHeading_strCDA_782_field_3_2">Surname</td>
</tr>In our JavaScript we add language translation for each of these items as well.
Do exactly the same thing with the "Find Similar" button, which turns out to be btnFind_SimilarstrCDA_782_field_1_2
5.2.2 Can I get a phone number please?
Simply move the div into the Question
5.2.3 What is your favourite colour?
Again move the div into the Question. However as this is a drop down list we want the values to appear to the user in their native language, but the data in the background to be stored in English for consistency.
Find the ID of the question, which in this case is strCDA_782_field_0_7. You do this by editing the question and at the top of the screen it will let you know what the element Id is.
For each item, we wipe the drop down list and put back in the options in the appropriate language. You can see below how this is done.
