Wednesday, March 30, 2011

JQuery: Creating A Slider

So... a customer had a little problem with a slider in SharePoint. I had no idea what she was talking about, but i thought that this might be interesting.
I google searched about the slider functions in jquery, which are indeed very nice. After playing around for a while I finally came up with this little slider, see code below.
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    #slider
    {
        margin: 10px;
        float: left;
        clear: left;
        width: 300px;
        margin: 15px;
    }
    #slider .ui-slider-range { background: #ef2929; }
    #slider .ui-slider-handle { border-color: #ef2929; }

    </style>

  </style>
  <script type="text/javascript">
      $(document).ready(function()
      {
            $("#slider").slider(
        {
            enable: true,
            animate: true,
            max: 100,
            min: 0,
            step: 1,
            range: "min",
            orientation: "horizontal",
            slide: function(event, ui)
            {
                    $("#amount").val(ui.value+'%');
                }
        });
        $("#amount").val($("#slider").slider("value")+ '%');
      });


  </script>
</head>
<body style="font-size:62.5%;">
    <div id="slider">
    </div><br>
    <input type="text" id="amount" style="border:0; color:#000000; font-weight:bold;" />
</body>
</html>


But what does actually happen here? It isn't that hard to explain, but hard to search for solutions all over the internet.
To begin with, just implement your sources for JQuery:
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And with this little piece of code you adjust your css:
#slider
    {
        margin: 10px;
        float: left;
        clear: left;
        width: 300px;
        margin: 15px;
    }
    #slider .ui-slider-range { background: #ef2929; }
    #slider .ui-slider-handle { border-color: #ef2929; }

Until now nothing happens. Let's take a look why the slider slides to the left and to the right.

There is a lot of stuff in this function. First of all you call the slider function from JQuery.
$(document).ready(function()
      {
            $("#slider").slider(
        {
            enable: true,
            animate: true,
            max: 100,
            min: 0,
            step: 1,
            range: "min",
            orientation: "horizontal",
            slide: function(event, ui)
            {
                    $("#amount").val(ui.value+'%');
                }
        });
        $("#amount").val($("#slider").slider("value")+ '%');
      });

This little piece is the configuration of the slider:
enable: true,
Display the value.
animate: true,
Animate the slider instead of letting it jump from start to the choosen point.
max: 100,
The max value.
min: 0,
The max value.
step: 1,
Size of the steps, which are able to take.
range: "min",
This is needed to color the bar.
orientation: "horizontal",
display a horizontal bar.

slide: function(event, ui)
            {
                    $("#amount").val(ui.value+'%');
                }
        });
        $("#amount").val($("#slider").slider("value")+ '%');
This function is simply to display the value which is selected.



And that's that. Now you can slide all day long. The value will not be stored anywhere, so after a refresh it's gone.

Thursday, March 3, 2011

Substrings & C#

To things simple, I decided that every value I'm writing in my "ContentField" will end with ", ". But this also happens with the last element. It doesn't look that good, that's why I want to cut it off.
And here's my solution:
int strlength = ContentField.Length;
string strend = ContenField.Substring(strlength - 2);
if (strend == ", ")
{
    strlength = strlength -2;
}
ContentField = ContentField.Substring(0, strlength);
I need the length of the string, in this case: the length of  "ContentField". To keep things shorter, I want to write that value into a new variable:
int strlength = ContentField.Length;
 The only interesting part in that string are the last too letters, so I'm creating a substring, only viewing the last 2 characters:
string strend = ContenField.Substring(strlength - 2);
The rest ist simple: compare the string to the characters, cut them off and post the new string.
ContentField = ContentField.Substring(0, strlength);
In this case I decided that the start of my substring is 0, this is the first character. and the end of my string will be defined by "strlength".

XPathNavigator & InfoPath 2010 using C#

So, back on the job and back to many problems. This time it really bugged me a bit.
I'm working on an InfoPath 2010 form, which needs some "tweaking" beyond the possibilities provided by rules implemented in InfoPath 2010.

Just as an example: I need to be able to set textfields or move their content easily. I want to be able to send the values from different checkboxes to a textfield. The checkbox is called "CheckMe" and is a boolean field. 1 means it is checked, 0 it isn't.
But how can I use these fields from InfoPath 2010? The answer is: XPathNavigator & XmlNamespaceManager.

Here's the code I'm using:

XPathNavigator xnPath = this.CreateNavigator();
XmlNamespaceManager xnNS = this.NamespaceManager;
string ContentField;
ContentField = xnPath.SelectSingleNode("//my:myFields/ContentField", xnNS).Value;
string CheckMe = xnPath.SelectSingleNode("//my:myFields/CheckMe").Value;
if (CheckMe == "1")
{
   ContentField = ContentField + "CheckMe";
}
What happens there?
XPathNavigator xnPath = this.CreateNavigator();
First of all I'm defining my "XPathNavigator" which will point to a part of my InfoPath form.

XmlNamespaceManager xnNS = this.NamespaceManager;
Here I'm creating my own new NamepaceManager, which is need in InfoPath 2010 while using C#.
Still, I'm not working with any fields. For that I gonna use this little line:
xnPath.SelectSingleNode("//my:myFields/ContentField", xnNS)
Now I'm pointing to the field I want to modify. This is a bit too long to remember, that's why I'm creating a new variable.
ContentField = xnPath.SelectSingleNode("//my:myFields/ContentField", xnNS).Value;
I need ".Value" to send the  to my variable, which in this case is a string. And now: here's the part where I'm manipulation the textfield.

if (CheckMe == "1")
{
   ContentField = ContentField + "CheckMe";
}
If the checkbox "CheckMe" is true, which means "checked", I want to write "CheckMe" into my textfield.