repository samples

TIBCOSoftware · Apr 2, 2021 · 0e42c95 · 0e42c95
1 parent dbc1838
commit 0e42c95
Show file tree

Hide file tree

Showing 13 changed files with 657 additions and 0 deletions.
diff --git a/repository-filter/limit-offset/demo.css b/repository-filter/limit-offset/demo.css
@@ -0,0 +1,91 @@
+.datagrid table {
+    border-collapse: collapse;
+    text-align: left;
+    width: 100%;
+}
+.datagrid {
+    font: normal 12px/150% Arial, Helvetica, sans-serif;
+    background: #fff;
+    overflow: hidden;
+    border: 1px solid #006699;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    margin-top:10px
+}
+.datagrid table td, .datagrid table th {
+    padding: 3px 10px;
+}
+.datagrid table thead th {
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
+    background-color:#006699;
+    color:#FFFFFF;
+    font-size: 15px;
+    font-weight: bold;
+    border-left: 1px solid #0070A8;
+}
+.datagrid table thead th:first-child {
+    border: none;
+}
+.datagrid table tbody td {
+    color: #00496B;
+    border-left: 1px solid #E1EEF4;
+    font-size: 12px;
+    font-weight: normal;
+}
+.datagrid table tbody .alt td {
+    background: #E1EEF4;
+    color: #00496B;
+}
+.datagrid table tbody td:first-child {
+    border-left: none;
+}
+.datagrid table tbody tr:last-child td {
+    border-bottom: none;
+}
+.datagrid table tfoot td div {
+    border-top: 1px solid #006699;
+    background: #E1EEF4;
+}
+.datagrid table tfoot td {
+    padding: 0;
+    font-size: 12px
+}
+.datagrid table tfoot td div {
+    padding: 2px;
+}
+.datagrid table tfoot td ul {
+    margin: 0;
+    padding:0;
+    list-style: none;
+    text-align: right;
+}
+.datagrid table tfoot li {
+    display: inline;
+}
+.datagrid table tfoot li a {
+    text-decoration: none;
+    display: inline-block;
+    padding: 2px 8px;
+    margin: 1px;
+    color: #FFFFFF;
+    border: 1px solid #006699;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
+    background-color:#006699;
+}
+.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover {
+    text-decoration: none;
+    border-color: #006699;
+    color: #FFFFFF;
+    background: none;
+    background-color:#00557F;
+}
+div.dhtmlx_window_active, div.dhx_modal_cover_dv {
+    position: fixed !important;
+}
+select, select option {text-transform:capitalize}
diff --git a/repository-filter/limit-offset/demo.details b/repository-filter/limit-offset/demo.details
@@ -0,0 +1,5 @@
+---
+ name: "List by Limit and Offset"
+ docs: "https://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v610/api-reference-visualizejs"
+ description: "View repository list as per limit and offset."
+ wrap: l
diff --git a/repository-filter/limit-offset/demo.html b/repository-filter/limit-offset/demo.html
@@ -0,0 +1,50 @@
+<!--Provide URL to visualize.js-->
+<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
+<div>
+    <label for='repoOffset'>Offset</label>
+    <input id='repoOffset' type='number' value='0' />
+    <br>
+    <label for='repoLimit'>Limit</label>
+    <input id='repoLimit' type='number' value='10' />
+    <button id='mybtn' type='button'>
+        fetch Data
+    </button>
+</div>
+<div class="datagrid">
+    <table>
+        <thead>
+        <tr>
+            <th>Label</th>
+            <th>URI of resource</th>
+            <th>Type</th>
+            <th>Created</th>
+        </tr>
+        </thead>
+        <tbody id="ResultsTableContent">
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/repository-filter/limit-offset/demo.js b/repository-filter/limit-offset/demo.js
@@ -0,0 +1,54 @@
+visualize({
+    auth: {
+        name: "joeuser",
+        password: "joeuser",
+        organization: "organization_1"
+    }
+}, function(v) {
+
+    var search = v.resourcesSearch({
+        folderUri: "/public",
+        types: ["reportUnit"],
+        success: renderResults,
+        error: displayError,
+        limit:10,
+        offset:0
+    });
+
+
+    document
+        .getElementById('mybtn')
+        .addEventListener("click", function() {
+            let getLimit = document.getElementById('repoLimit').value ? document.getElementById('repoLimit').value : 5;
+            let getOffset= document.getElementById('repoOffset').value ? document.getElementById('repoOffset').value : 0;
+            search
+                .types(['reportUnit'])
+                .limit(parseInt(getLimit,10))
+                .offset(parseInt(getOffset,10))
+                .run()
+                .done(renderResults);
+        });
+
+
+    // utility function
+    function renderResults(results) {
+        var tbody = document.getElementById("ResultsTableContent"),
+            alt = false,
+            html = [];
+
+        for (var i = 0; i < results.length; i++) {
+            html.push((alt = !alt) ? '<tr>' : '<tr class="alt">');
+            html.push("<td>" + results[i].label + "</td>");
+            html.push("<td>" + results[i].uri + "</td>");
+            html.push("<td>" + results[i].resourceType + "</td>");
+            html.push("<td>" + results[i].creationDate + "</td>");
+            html.push("</tr>");
+        }
+        tbody.innerHTML = html.join("");
+    }
+
+    function displayError(err) {
+        alert(err.message);
+    }
+
+});
diff --git a/repository-sort/sorting-list/demo.css b/repository-sort/sorting-list/demo.css
@@ -0,0 +1,90 @@
+.datagrid table {
+    border-collapse: collapse;
+    text-align: left;
+    width: 100%;
+}
+.datagrid {
+    font: normal 12px/150% Arial, Helvetica, sans-serif;
+    background: #fff;
+    overflow: hidden;
+    border: 1px solid #006699;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.datagrid table td, .datagrid table th {
+    padding: 3px 10px;
+}
+.datagrid table thead th {
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
+    background-color:#006699;
+    color:#FFFFFF;
+    font-size: 15px;
+    font-weight: bold;
+    border-left: 1px solid #0070A8;
+}
+.datagrid table thead th:first-child {
+    border: none;
+}
+.datagrid table tbody td {
+    color: #00496B;
+    border-left: 1px solid #E1EEF4;
+    font-size: 12px;
+    font-weight: normal;
+}
+.datagrid table tbody .alt td {
+    background: #E1EEF4;
+    color: #00496B;
+}
+.datagrid table tbody td:first-child {
+    border-left: none;
+}
+.datagrid table tbody tr:last-child td {
+    border-bottom: none;
+}
+.datagrid table tfoot td div {
+    border-top: 1px solid #006699;
+    background: #E1EEF4;
+}
+.datagrid table tfoot td {
+    padding: 0;
+    font-size: 12px
+}
+.datagrid table tfoot td div {
+    padding: 2px;
+}
+.datagrid table tfoot td ul {
+    margin: 0;
+    padding:0;
+    list-style: none;
+    text-align: right;
+}
+.datagrid table tfoot li {
+    display: inline;
+}
+.datagrid table tfoot li a {
+    text-decoration: none;
+    display: inline-block;
+    padding: 2px 8px;
+    margin: 1px;
+    color: #FFFFFF;
+    border: 1px solid #006699;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
+    background-color:#006699;
+}
+.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover {
+    text-decoration: none;
+    border-color: #006699;
+    color: #FFFFFF;
+    background: none;
+    background-color:#00557F;
+}
+div.dhtmlx_window_active, div.dhx_modal_cover_dv {
+    position: fixed !important;
+}
+select, select option {text-transform:capitalize}
diff --git a/repository-sort/sorting-list/demo.details b/repository-sort/sorting-list/demo.details
@@ -0,0 +1,5 @@
+---
+ name: "Sorting List"
+ docs: "https://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v610/api-reference-visualizejs"
+ description: "provides sorting resource list by column name."
+ wrap: l
diff --git a/repository-sort/sorting-list/demo.html b/repository-sort/sorting-list/demo.html
@@ -0,0 +1,45 @@
+<!--Provide URL to visualize.js-->
+<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
+<label>Sort Type </label>
+<select name="sortBy" id="sortBy" class='sort' disabled>
+    <option value="label">Label</option>
+</select>
+
+<div class="datagrid">
+    <table>
+        <thead>
+        <tr>
+            <th>Label</th>
+            <th>URI of resource</th>
+            <th>Type</th>
+            <th>Created</th>
+        </tr>
+        </thead>
+        <tbody id="ResultsTableContent">
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        <tr>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+            <td>data</td>
+        </tr>
+        </tbody>
+    </table>
+</div>