Tuesday, 17 March 2015

Simpliest Extension Object Part 2

Let's vitalize our extension object.
Take a look at Accordion sample


 Just create inside of RusGon new folder (Accordion) and copy content of SimpliestExtObj (Definition.xml, Icon.png, Script.js) into Accordion folder.
Change Definition.xml like this:
<?xml version="1.0" encoding="utf-8"?>

<ExtensionObject Label="Accordion" Description="Accordion" PageHeight="100000">

  <Dimension Label="Dimension1_RS" Initial="State" DropTarget="State"/> 

  <Initiate Name="Caption.Text" Value="Accordion" /> 

</ExtensionObject>

Edit Script.js
Open  Accordion sample and take a look at html code of page (Ctrl+U in Google Chrome).
Copy following part
$(document).ready(function(){

        

        $(".accordion h3:first").addClass("active");

        $(".accordion p:not(:first)").hide();



        $(".accordion h3").click(function(){

                $(this).next("p").slideToggle("slow")

                .siblings("p:visible").slideUp("slow");

                $(this).toggleClass("active");

                $(this).siblings("h3").removeClass("active");

        });



});
into Script.js, but these lines 
<style type="text/css">

body {

        margin: 10px auto;

        width: 570px;

        font: 75%/120% Arial, Helvetica, sans-serif;

}

.accordion {

        width: 480px;

        border-bottom: solid 1px #c4c4c4;

}

.accordion h3 {

        background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;

        padding: 7px 15px;

        margin: 0;

        font: bold 120%/100% Arial, Helvetica, sans-serif;

        border: solid 1px #c4c4c4;

        border-bottom: none;

        cursor: pointer;

}

.accordion h3:hover {

        background-color: #e3e2e2;

}

.accordion h3.active {

        background-position: right 5px;

}

.accordion p {

        background: #f7f7f7;

        margin: 0;

        padding: 10px 15px 20px;

        border-left: solid 1px #c4c4c4;

        border-right: solid 1px #c4c4c4;

}

</style>

</head>



<body>



<div class="accordion">

        <h3>Question One Sample Text</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

        <h3>This is Question Two</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

        <h3>Another Questio here</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

        <h3>Sample heading</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

        <h3>Sample Question Heading</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

</div>
we need prepare a bit. Technically we need to
replace all double quotes by single quotes;
each line should be enbordered by double quotes;

Following VBA code demonstrates this technique:
Private Sub btnTransform_Click()

    Dim txt As String

    Dim out As String

    Dim strArray() As String

    Dim i As Integer

    

    out = ""

    

    If Not IsNull(txtFrom.Value) Then

        txt = txtFrom.Value

        If txt <> "" Then

            txt = Replace(txt, """", "'")

            

            strArray() = Split(txt, vbCrLf)

            

            For i = LBound(strArray) To UBound(strArray)

                out = out & """" & strArray(i) & """+" & vbCrLf

            Next

                    

            txtTo.Value = out

            

            Me.txtTo.SetFocus

            DoCmd.RunCommand acCmdCopy

        End If

    End If

    

End Sub
 
At the end Script.js should look like this:
Qva.LoadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function() {  

          Qva.AddExtension('QlikView/Examples/RusGon/Accordion', function(){  

                   //Begin extension code.  

                        this.Element.innerHTML = 

                        "<HTML><BODY> "+



                        "<style type='text/css'>"+

                        "body {"+

                        "       margin: 10px auto;"+

                        "       width: 570px;"+

                        "       font: 75%/120% Arial, Helvetica, sans-serif;"+

                        "}"+

                        ".accordion {"+

                        "       width: 480px;"+

                        "       border-bottom: solid 1px #c4c4c4;"+

                        "}"+

                        ".accordion h3 {"+

                        "       background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;"+

                        "       padding: 7px 15px;"+

                        "       margin: 0;"+

                        "       font: bold 120%/100% Arial, Helvetica, sans-serif;"+

                        "       border: solid 1px #c4c4c4;"+

                        "       border-bottom: none;"+

                        "       cursor: pointer;"+

                        "}"+

                        ".accordion h3:hover {"+

                        "       background-color: #e3e2e2;"+

                        "}"+

                        ".accordion h3.active {"+

                        "       background-position: right 5px;"+

                        "}"+

                        ".accordion p {"+

                        "       background: #f7f7f7;"+

                        "       margin: 0;"+

                        "       padding:  10px 15px 20px;"+

                        "       border-left: solid 1px #c4c4c4;"+

                        "       border-right: solid 1px #c4c4c4;"+

                        "}"+

                        "</style>"+

                        "</head>"+

                        ""+

                        "<body>"+

                        ""+

                        "<div class='accordion'>"+

                        "       <h3>Question One Sample Text</h3>"+

                        "       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+

                        "       <h3>This is Question Two</h3>"+

                        "       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+

                        "       <h3>Another Questio here</h3>"+

                        "       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+

                        "       <h3>Sample heading</h3>"+

                        "       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+

                        "       <h3>Sample Question Heading</h3>"+

                        "       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+

                        "</div>"+

                

                        "</BODY></HTML>";       



                        $(document).ready(function(){

         nbsp;                       $(".accordion h3:first").addClass("active");

                                $(".accordion p:not(:first)").hide();



                                $(".accordion h3").click(function(){

                                        $(this).next("p").slideToggle("slow")

                                        .siblings("p:visible").slideUp("slow");

                                        $(this).toggleClass("active");

                                        $(this).siblings("h3").removeClass("active");

                                });                                                             

                        });                                                     

          });  

 });

Open QlikView and we see Accordion Object
Posted by at

1 comment:

  1. Ruslan Goncharov17 March 2015 at 09:25

    You may download Accordion project from GoogleDrive http://goo.gl/XWd0FP

    ReplyDelete

Subscribe to: Post Comments (Atom)