jQuery in Container Bound Google Apps Script?

1
votes

Is it currently possible to use the jQuery library in a Google Doc or Google Sheet container bound Google Apps Script? If so, how?

1
jquerygoogle-apps-script
Container-bound scripts might relate to Google Sheets, Docs, and Forms, or to Google Sites. I suspect the answers are different. Are you talking about Sites, or one of the others? – T.J. Crowder
@T.J.Crowder - good point - I clarified the question. – Myer
Yes. Look at the docs for htmlApp – Zig Mandel
@ P.Myer Nore -There is little chance that anyone notice your edit-refinement request...why not posting a new question? -btw, thx for accepting and up voting :-) – Serge insas

1 Answers

1
votes

it works exactly the same way as UiApp in spreadsheet, just use 

  SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());

and create an HTML file with your code and library.

below is a full demo code, a screen capture and a link to a shared example (view only).

code :

function onOpen() {
  var menuEntries = [ {name: "datePickerTest", functionName: "datePickerTest"}
                     ];
  SpreadsheetApp.getActiveSpreadsheet().addMenu("test",menuEntries);//
}

function datePickerTest(){
  SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());
}

index.html

<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt } 
                            p { color : red ; font-size : 8pt } 
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script>

/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
              Stéphane Nahmani ([email protected]),
              Stéphane Raimbault <[email protected]> */
jQuery(function($){
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
        'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
        monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
        'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
        dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
        dayNamesMin: ['D','L','M','M','J','V','S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yyyy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''};
    $.datepicker.setDefaults($.datepicker.regional['fr']);
});

</script>

Welcome to some random page

<p>Please select a date below :</p>

click here : <input type="text" name="date" id="datepicker" />
<input type="text" id="alternate" size="30">

<script>
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy",
      showWeek: false,
      firstDay: 1,
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'dd-mm-yy',
      Locale : 'fr'
    });
</script>

</div>

enter image description here