Customisation How To's

From Pengower
Jump to: navigation, search

Learn different application customizations.

How to create a Dynamic HTML button

A dynamic button is a button element that contains a dynamic text. It has the ability to change its state when hovered over.

Insert sample image here

We are going to use HTML and Jquery to create the button.

HTML Markup

<style type="text/css">
       .button div
       {
           float:left;
           height:30px;  /* Set the btnMiddle.line-height to the same value to vertically center the text */
           padding:0px;
           margin:0px;
       }
       .btnMiddle
       {
           float:left;
           width:50px;
           font-size:12pt;
           font-weight:bold;
           color:White;
           text-align:center;
           line-height:30px;
       }
</style>
 <div class="button">
 <div class="btnLeft"><img src="Images/ImgBtnLeftNormal.png" /></div>
 <div class="btnMiddle" style="background-image:url(Images/ImgBtnMiddleNormal.png);">Button text</div>
 <div class="btnRight"><img class="btnRight" src="Images/ImgBtnRightNormal.png"/></div>
 </div>

Note that the "wrapper" around the button does not have to be a div - it could be an li for example - but it must have the class button.

We then need the following script (you need to include the jQuery library first):

<script type="text/javascript">
   $(function() {
       $(".button").hover(buttonOver, buttonOut);
   });
   function buttonOver(eventObj) {
       $(this).children(".btnLeft").children("img").attr("src", "Images/ImgBtnLeftHot.png");
       $(this).children(".btnRight").children("img").attr("src", "Images/ImgBtnRightHot.png");
       $(this).children(".btnMiddle").css("background-image", "url(Images/ImgBtnMiddleHot.png)");
   }
   function buttonOut(eventObj) {
       $(this).children(".btnLeft").children("img").attr("src", "Images/ImgBtnLeftNormal.png");
       $(this).children(".btnRight").children("img").attr("src", "Images/ImgBtnRightNormal.png");
       $(this).children(".btnMiddle").css("background-image", "url(Images/ImgBtnMiddleNormal.png)");
   }
</script>


Note: Images - This technique requires three images:

a.) one for the left end of the button,

b.) one for the right end of the button

c.) background image for the middle

They all need to be the same height (in the example above they are all 30px high). The background-image for the middle bit should be 1px in width and will be repeated horizontally to expand the space. You will of course need two versions of each image - a "normal" and a "hot" version.


How to build a custom Drop Down

Sometimes you need to build a custom drop-down to restrict the items a user can see in a list. These tree bits of action script combined with a Content field will do the job.

This method uses a utility function to render the dropdown and shows you how to call it and how to retrieve the result.


Example of calling the render function

Set frm = Do Open Custom Form Params Custom Form = "Referral"
 
Set custID  = ""
Set tmpArr  = referral["Client Organisation"]
If (tmpArr.Count > 0)
    Set tmpObj  = tmpArr[1]
    Set custID  = tmpObj["ID"]
EndIf
 
Set ArrayToSort = referrer["Customers"]
Set SortByElement   = "Name"
Set args = {}
Add ArrayToSort To args
Add SortByElement To args
Set rtn = Do Run Script Params Script Name = "fnLib Sort", Args = args
Set custArr = rtn[3]
 
Set OptionArr   = {}
For custNo = 1 To custArr.Count
    Set cust = custArr[custNo]
 
    If ("Yes" = cust["Active?"])
        Set tmpArr  = {}
        Set tmpStr  = cust["ID"]
        Add tmpStr To tmpArr
        Set tmpStr  = cust["Name"]
        Add tmpStr To tmpArr
        If (cust["ID"] = custID)
            Add 1 To tmpArr
        Else
            Add 0 To tmpArr
        EndIf
 
        Add tmpArr To OptionArr
    EndIf
Next
Set ControlID = "customerid"
 
Set args = {}
Add OptionArr To args
Add ControlID To args
Set rtn = Do Run Script Params Script Name = "fn Render Dropdown", Args = args
Set h = rtn[3]
 
Set frm["Client Organisation"]  = h


Example of retrieving the result

Set customerArr = {}
Set tmpStr  = Do Request Field Params Name = "customerid"
Set customerID  = "" + tmpStr
If ("#NONE#" != customerID)
    Set tmpArr  = referrer["Customers"]
    If tmpArr.Count > 0
        Set i = 1
        Loop
            Set tmpObj  = tmpArr[i]
            If (tmpObj["ID"] = customerID)
                Add tmpObj To customerArr
            EndIf
            Set i = i + 1
        Until (customerArr.Count > 0) OR (i > tmpArr.Count)  
    EndIf
EndIf
Set referral["Client Organisation"] = customerArr


fn Render Dropdown

This is a utility function that will return the HTML to render a dropdown

// fn Render Dropdown
 
// arguments OptionArr array ID, Description, selected (bool) eg [ID-1, First Entry, 0]
// ControlID string  the desired value of the id & name attributes of the control
// Width integer the desired width of the control in pixies
 
 
Set optionArr = OptionArr
Set controlid = "" + ControlID
If ("" = controlid)
    Set controlid = "selectedid"
EndIf
Set width = 0 + Width
If (0 = width)
    Set widthStr = ""
Else
    Set widthStr = "style='width: " + width + "px;'"
EndIf
 
 
Set selected = 0
 
Set h = ""
Set h = h + "<table cellspacing='0' cellpadding='0' border='0' class='workText'>"
Set h = h + "<tbody>"
Set h = h + "<tr>"
Set h = h + "<td style='vertical-align: middle; padding-bottom: 1px;'>"
Set h = h + "<select class='dropDown' id='dropdown' name='dropdown' onchange='set" + controlid + "(this)' " + widthStr + ">"
For optionNo = 1 To optionArr.Count
    Set tmpArr  = optionArr[optionNo]
    If (1 = tmpArr[3])
        Set selected = 1
        Set selectedID = tmpArr[1]
        Set h = h + "<option value='" + tmpArr[1] + "' selected='selected'>" + tmpArr[2] + "</option>"
    Else
        Set h = h + "<option value='" + tmpArr[1] + "'>" + tmpArr[2] + "</option>"
    EndIf
Next
If (0 = selected)
    Set selectedID = "#NONE#"
    Set h = h + "<option value='#NONE#' selected='selected'><none></option>"
Else
    Set h = h + "<option value='#NONE#'><none></option>"
EndIf
Set h = h + "</select>"
Set h = h + "</td>"
Set h = h + "<td style='vertical-align: middle; padding-left: 2px; padding-bottom: 1px;'> </td>"
Set h = h + "</tr>"
Set h = h + "</tbody>"
Set h = h + "</table>"
 
Set h = h + "<input name='" + controlid + "' id='" + controlid + "' value='" + selectedID + "' type='hidden'>"
Set h = h + "<script type='text/javascript'>"
Set h = h + "   function set" + controlid + "(obj)"
Set h = h + "       {"
Set h = h + "       document.getElementById('" + controlid + "').value=obj.value;"
Set h = h + "       }"
Set h = h + "</script>"
 
 
Output  = h
Return_Ok


How to print Custom HTML in IE to always print two pages

This is caused by the baseTable having a height of 100%, which on print causes it to go to the next page.

If you can add this to your custom HTML then it will go away:

<style type="text/css" media="print">
.baseTable {
  height: 95%;
}
</style>

Or you can just add it to your main stylesheet instead of making it print-specific.

How to add Jquery sliders

If you wish to include a slider in your application it is possible to do so using jqueryui.

In order to use sliders the following files will need to be added to the application's webfolder in js folder. The includes can be downloaded from http://jqueryui.com/download

//main jquery include
jquery-1.8.0.min.js

//jqueryui include
jquery-ui-1.8.23.custom.min.js

//styling include
jquery-ui-1.8.23.custom.css

N.B. exact filenames may vary

Simple Slider

In the following example everything within *s should be replaced.

// --- javascript for sliders ---

<link type='text/css' href='js/jquery-ui-1.8.23.custom.css' rel='stylesheet' />
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript'>
    $(function(){
        $('.*SLIDERCLASS*').each(function(){
            $(this).find('.*SLIDERCLASS*').empty().slider({
                max:*highest number value on slider*,
                min:*lowest number value on slider*,
                step:*increments, default = 1*,
                change: function(event,ui){
                    //get slider
                    var slide = $(this);
                    //get slider container
                    var parent = slide.context.parentNode;
                    //look within the the container for the result class and update the value
                    var result = $(parent).find('.*SLIDERRESULTCLASS*').val(ui.value);
                }
            });
        });
    });
</script>

// --- end javascript ---
// --- html for sliders ---


//COUNTER coud be i/j/k etc. if creating in loop or manually incremented
//slider container
<div class='*SLIDERCONTAINERCLASS*' width='100%'>
    //slider
    <div class='*SLIDERCLASS*' id='slider"+COUNTER+"' style='width:100%;float:left;vertical-align:middle'></div>
    //container for the slider result
    <div id='sliderresult"+COUNTER+"'>
        <input class='*SLIDERRESULTCLASS*' type='hidden' name='*Name Parameter for Do Request Field*' />
    </div>
</div>
//to set the value of the counter in the case of loading a previous value
<script type='text/javascript'>$(function(){$(this).find('#slider"+COUNTER+"').slider('value', *PREVIOUS VALUE*);});</script>

// --- end html ---

Slider with Text Output

If you want to link the value of the slider to some text but retaining the number value of the slider itself some minor additions must be made. the additions will be shown in red

// --- javascript for sliders ---

<link type='text/css' href='js/jquery-ui-1.8.23.custom.css' rel='stylesheet' />
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript'>
    var textArray = ['Never','Rarely','Sometimes','Often','Always'];
</script>
<script type='text/javascript'>
    $(function(){
        $('.*SLIDERCLASS*').each(function(){
            $(this).find('.*SLIDERCLASS*').empty().slider({
                max:*highest number value on slider*,
                min:*lowest number value on slider*,
                step:*increments, default = 1*,
                change: function(event,ui){
                    //get slider
                    var slide = $(this);
                    //get slider container
                    var parent = slide.context.parentNode;
                    //look within the the container for the result class and update the value
                    var result = $(parent).find('.*SLIDERRESULTCLASS*').val(ui.value);
                    //get the value of the slider
                    var value = $(this).slider( 'option', 'value' );
                    //get the corresponding value from the textArray
                    var score = $(parent).find('.*SLIDERTEXTCLASS*').html(textArray[value]);
                }
            });
        });
    });
</script>

// --- end javascript ---
// --- html for sliders ---


//COUNTER coud be i/j/k etc. if creating in loop or manually incremented
//slider container
<div class='*SLIDERCONTAINERCLASS*' width='100%'>
    //slider
    <div class='*SLIDERCLASS*' id='slider"+COUNTER+"' style='width:100%;float:left;vertical-align:middle'></div>
    //container for the slider result
    <div id='sliderresult"+COUNTER+"'>
        <input class='*SLIDERRESULTCLASS*' type='hidden' name='*Name Parameter for Do Request Field*' />
    </div>
    <div class='*SLIDERTEXTCLASS*' id='sltext"+COUNTER+"' style='float:none;text-align:center'></div>
</div>
//to set the value of the counter in the case of loading a previous value
<script type='text/javascript'>$(function(){$(this).find('#slider"+COUNTER+"').slider('value', *PREVIOUS VALUE*);});</script>

// --- end html ---

Getting the value in Script

Accessing the value of the slider in script is done using a Do Request Field Params Name = string where string is replaced by the value of '*Name Parameter for Do Request Field*'
e.g.

Set sliderValue = Do Request Field Params Name = 'sliderResultBox'

Examples

basic slider
basic slider with value visible
basic slider with alternate styling
slider with corresponding text