Jump to content

Hastur

Caspio Guru
  • Posts

    142
  • Joined

  • Last visited

  • Days Won

    14

Posts posted by Hastur

  1. Hello!

    To change the color you need to use additional JS code. It will parse the data in chart and change the color according to name of the column.
    Here is the code:

    <script type="text/javascript">
    document.addEventListener('DataPageReady', chartUpdateHandler);
    
    function chartUpdateHandler(event) {
      
     var cleaner = function(interv) {
      clearInterval(interv);
     } 
    
     let interv = setInterval(() => {
      if (!!Highcharts) {
       const options = Highcharts.charts[0].series[0].data;
       let data = []; 
    
       options.forEach(option => {
          let localData = {};
          localData.y = option.y;
          localData.name = option.name; 
    
          if(option.name === "(blank)") {
           localData.color = '#ee5921';
          } else {
           localData.color = '#3186AD';
          } 
    
          data.push(localData);
         })   
    
         Highcharts.charts[0].update({
          series: {
           data: data
           }    
        });
        cleaner(interv);
      } 
     }, 200);
    }
    </script>

    You need to insert this code into the Header of the report DataPage. Do not forget to disable the HTML editor.

  2. Hello @CoopperBackpack

    You may use additional JS code to implement this workflow:

    <script type="text/javascript">
    document.addEventListener('DataPageReady', fileInputEvent)
    
    function fileInputEvent() {
     document.querySelector("#InsertRecordFile_f"),addEventListener('change', fileInputHandler); // use the InsertRecord[your file field name] instead
     document.removeEventListener('DataPageReady', fileInputEvent)
    }
    
    function fileInputHandler(event) {
     const fileSizeInput = document.querySelector('#InsertRecordFile_size'); // use the InsertRecord[your file size field name] instead
     fileSizeInput.value = event.target.files[0].size;
    }
    </script>

    Insert this code into the header of the submission form. Do not forget to disable the HTML editor.

    For the file size field use the Number data type. You also may make the size field hidden in the submission form.

  3. @davidhshugar

    I have improved the solution to work without reloading.

    You need to add one additional HTML block with this code:

    <p id="ancor"></p>

    The following code should be int the Header:

    <script type="text/javascript">
    document.addEventListener('DataPageReady', submitHandler);
    
    function submitHandler() {
    	let submissionForm = document.querySelector('form[action^="your_deploy_URL"]');
        submissionForm.style.display = 'none';
        if(document.getElementById('ancor') !== null) {
            document.removeEventListener('DataPageReady', submitHandler);
            submissionForm.submit();    
     	}
       document.removeEventListener('DataPageReady', submitHandler);
    }
    </script>

    To make it work, DataPage itself should either redirect OR show the message after the submission.

  4. Hello @CoopperBackpack

    You need to use some additional JS to handle the scroll
    This code needs to be inserted in the Header of the DataPage you  open  through the link:

    <script type="text/javascript">
    document.addEventListener('DataPageReady', scrollHandler)
    
    function scrollHandler(event) {
     parent.postMessage('scrollHandler', '*');
     document.removeEventListener('DataPageReady', scrollHandler)
    };
    </script>

    This code needs to be placed in your CMS system before the deploy code of the DataPage:

    <script>
    	window.addEventListener("message", receiveMessage, false);
    
    	function receiveMessage(event){		
    		if (event.data === 'scrollHandler') {
    			window.scroll(0, 0);
    		}		
    	}
    </script>

     

  5. Hello @CoopperBackpack

    You can insert this snippet of code into your submission form Header:

    <style>
    .cbFormFieldCell  {
     position: relative;
     width: 50%;
    }
    
    .cbFormFieldCell  .floating-label {
     position: absolute;
     color: gray;
     font-size: 13px;
     pointer-events: none;
     top: 11px;
     left: 20px;
     transition: 0.2s ease all;
    }
    
    .cbFormFieldCell  input:focus ~ .floating-label,
    .cbFormFieldCell input:not(:focus):valid ~ .floating-label {
     top: 0px;
     left: 10px;
     font-size: 10px;
     opacity: 1;
     background-color: white;
     padding: 0 3px;
    }
    </style>
    
    <script>
    document.addEventListener("DataPageReady", placeholderHandler);
    
    function placeholderHandler() {
     const labels = document.querySelectorAll('.cbFormLabelCell');
     const inputs = document.querySelectorAll('.cbFormFieldCell');
    
     for(let i = 0; i < labels.length; i++) {
      if (inputs[i].children[0].type === 'text') {  
       labels[i].children[0].classList.add("floating-label");
       inputs[i].children[0].setAttribute("required", true);
       inputs[i].appendChild(labels[i].children[0]);
       labels[i].remove();
      }
     }
     console.log(labels);
    }
    </script>

    You also can customize the placeholder adjusting the properties in the style tag of the code.

  6. @benrob

    You an try the following:

    1. Place this code outside of the iFrame deployment above the deploy code:

    <script type="text/javascript">
    	window.addEventListener("message", receiveMessage, false);
    	function receiveMessage(event) {
    		document.querySelector('iframe[name="Search and Report"]').height = event.data
    	}
    </script>

    2. Insert this code into the Result set of the Report:

    Header:

    </header>
    <div id="wrapper">
    <header>

    Footer:

    </footer>
    </div>
    <footer>
    
    <script type="text/javascript">
    
    document.addEventListener('DataPageReady', resizeHandler)
    
    function resizeHandler(event) {
     let heightVal = document.getElementById('wrapper').offsetHeight + 150;
     parent.postMessage(heightVal, '*');
     document.removeEventListener('DataPageReady', resizeHandler)
    };
    
    </script>

    Do not forget to  use the name of your DataPage instead of "Search and Report"

  7. Hello @kpcollier

    You can use this code:

    <script type="text/javascript">
    
    document.addEventListener('DataPageReady', assignAdditionalListeners)
    
    function assignAdditionalListeners() {
     document.querySelector('input[id^="InsertRecordtext_f0"]').addEventListener('change', customAlert); // change ID
     document.querySelector('input[id^="InsertRecordtext_f1"]').addEventListener('change', customAlert); // change ID
     document.querySelector('input[id^="InsertRecordtext_f2"]').addEventListener('change', customAlert); // change ID
     document.querySelector('input[id^="InsertRecordtext_f3"]').addEventListener('change', customAlert); // change ID
     document.querySelector('input[id^="InsertRecordtext_f4"]').addEventListener('change', customAlert); // change ID
     document.querySelector('input[id^="InsertRecordtext_f5"]').addEventListener('change', customAlert); // change ID
     document.removeEventListener('DataPageReady', assignAdditionalListeners)
    }
    
    function customAlert(event) {
     alert(event.target.value);
    }
    
    </script>

    You need to place the code in the header of the form. Do not forget to disable the HTML editor in the advanced section of the footer.

    You need to change the ID according to the name of the field you use.
    In the Example I have name as "InsertRecordtext_f0". If your field has name "Reason", you should name ID like this - "InsertRecordReason0".

  8. @benrob

    You may use this code in the Result set of the Report:

    1. Header -

    </header>
    <div id="wrapper">
    <header>

    2. Footer -

    </footer>
    </div>
    <footer>
    
    <script type="text/javascript">
    
    document.addEventListener('DataPageReady', resizeHandler)
    
    function resizeHandler(event) {
     let heightVal = document.getElementById('wrapper').offsetHeight + 150;  // Change 150 according to the height of the search form
     var localWindow = window.parent.document.querySelector('iframe[name="Search and Report"]').style; // Change the name of the DataPage
     localWindow.height = heightVal + 'px';
     document.removeEventListener('DataPageReady', resizeHandler)
    };
    
    </script>

    If you still see scroll, change the 150 value as mention in the code.

    Also, you need to use the name of your DataPage instead of "Search and Report"

  9. @guardmetrics

    You may use this formula:

    CAST(((
      DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) 
    	- 
      (DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60)
    )
    /
    60) AS nvarchar)
    +
    ':'
    +
    CASE WHEN LEN(CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar)) = 1
      THEN '0' + CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar)
      ELSE CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar)
    END

     

  10. Hello @Jaymee

    Try to insert this code in the header of the DataPage result set 

    <script type="text/javascript">
    
    document.addEventListener('DataPageReady', hideBlankHandler)
    
    function hideBlankHandler() {
     let labels = document.querySelectorAll('.cbResultSetListViewDataLabel ');
     let values = document.querySelectorAll('.cbResultSetData');
     console.log(labels , values)
    
     for (let i = 0; i < values.length; i++) {
      if (values[i].innerHTML === "&nbsp;") {
       labels[i].remove();
       values[i].remove();
      }
     }
    }
    
    </script>

    You need to check two thing.

    First - your DataPage has the Responsive option enabled
    Second - you need to disable the HTML editor of the Header

  11. @guardmetrics

    The calculated field should look like this in:

    CAST(((
      DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) 
    	- 
      (DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60)
    )
    /
    60) AS nvarchar)
    +
    ':'
    +
    CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar)

    Also you may find other examples here - 

     

  12. @Vipul

    There are two ways to implement such a workflow.
    1. You can create triggered action to update to Total price of the order when the users submits new item. It most cases, it requires 3 triggers on each event (insert, update, delete) and it is not the easiest thing to implement.

    2. The second approach is to create the calculated field on the DataPage level to sum prices of all items per order ID.
    Example:

    SELECT SUM(Item_Price) FROM Order_tbl WHERE Order_ID = [@field:Order_ID]

    You need to change the names of the fields and tables according to your local names.

  13. @DesiLogi

    Hello!

    To implement Such a iframe, your files should do the following:
    1. Place PDF files in some folder
    2. Enable the CDN FileStore

    TxKLOuj.png

    Also, the code should look like this:

    <script type="text/javascript">
        document.addEventListener('DataPageReady', embed_pdf);
    
        function embed_pdf(){
            var pdf_link = "[@field:PDF_File/]";
            if(pdf_link === "") {
                  return null;
            }
            var google_link= "https://docs.google.com/gview?url=";
            var google_param = "&embedded=true";        
            var encoded_pdf_link = encodeURIComponent(pdf_link);
            
            var iframe_window = document.getElementById("iframe_pdf");        
            iframe_window.style.display = "block";
            iframe_window.src=google_link + encoded_pdf_link + google_param;
            document.removeEventListener('DataPageReady', embed_pdf);
        }
    </script>

    You can place the code with iframe in any place of your DataPage.

    <iframe id="iframe_pdf" style="width:80%; height: 1100px; display: none;" align="middle" frameborder="0"></iframe>

     

  14. @rush360

    The script you use now does not make any sense as it sets the .onload listener at the moment when DataPage is ready. It is like you trying to go home when you are already at home...

    You may create function to check each parameter and then hide the appropriate block.
    Example:

     

    <script type="text/javascript">
    function hideBlocks() {
     var zipValue = '[@field:Zip3]';
     if(zipValue === '') { 
      document.getElementById('box1').style.display = 'none';
     }
     document.removeEventListener('DataPageReady', hideBlocks);
    }
    
    document.addEventListener('DataPageReady', hideBlocks);
    </script>
    
    
    <!-- Your HTML code -->
    
    <div id="box1" style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
     	<p>[@field:Address3_Type] [@field:Verb3]</p>
    	<br />
    	<p>[@field:Address3_Time@] [@field:Address3_Time*]</p>
    	<hr />
      	<p>Address:</p>
      	<br />
    	<p>[@field:Address3]</p>
      	<br />
    	<p>[@field:City3], [@field:State3]</p>
      	<br />
    	<p>[@field:Country3], [@field:Zip3]</p>
    </div>

     

  15. Hello @HughOD

    You may add the wrapper to your DataPage using header and footer.

    Here is the example for responsive DataPages:

    <!-- Code in the Header starts -->
      </header>
      	<div class="YOUR_CUSTOM_CLASS">
      <header>
    <!-- Code in the Header ends -->
      
    DATAPAGE
    
    <!-- Code in the Footer starts -->
      </footer>
        </div>
      <footer>
     <!-- Code in the Footer ends -->

    And  for the non-responsive DataPages:

    <!-- Code in the Header starts -->
      </div>
      	<div class="YOUR_CUSTOM_CLASS">
      <div>
    <!-- Code in the Header ends -->
      
    DATAPAGE
    
    <!-- Code in the Footer starts -->
      </div>
      	</div>
      <div>
     <!-- Code in the Footer ends -->

    Also, you may find a lot of information about CSS selectors here - https://www.w3schools.com/cssref/css_selectors.asp

×
×
  • Create New...