Google forms API : how to add custom css via code edit? - google-apps-script

I need to custom a google form, want to hide google logo and back button on second section
i tried a function like this :
function myFunctioncss() {
function onOpen() {
var myLogoDeGoogle = document.querySelector(".freebirdFormviewerViewFooterImageContainer.freebirdFormviewerViewFooterPageBreak");
myLogoDeGoogle.style.display = "none";
var myBoutonRetour = document.querySelector(".quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationNoSubmitButton");
myBoutonRetour.style.display = "none";
var myTitreTest = document.querySelector(".freebirdFormviewerViewItemsItemItemTitle.freebirdCustomFont");
myTitreTest.style.color = "red";
var myFond = document.querySelector(".freebirdFormviewerViewFormContent");
myFond.style.background = "green";
}
}
With a trigger on form open.
Not Errors but it does not change anything on the form.
All ideas will be welcome..

Related

Add crosshair to embedded chart

I want to update one of my Google Spreadsheet embedded chart with crosshairs. After reading the doc, I've come to the conclusion that this code should work :
function ChartLine()
{
var sheet = SpreadsheetApp.openById("someId").getSheetByName("someSheet");
var chartBuilder = sheet.getCharts()[0].modify().asLineChart();
chartBuilder.setOption("crosshair", { trigger: 'both' });
sheet.updateChart(chartBuilder.build());
}
Unfortunately, this does not add crosshairs. I've been able to modify the chart's title using similar code. So, I'm left wondering why it is not working.
Thank you.
According to this Crosshair Documentation you can use this small snippet below to try and see if it works for you:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number');
data.addColumn('number');
for (var i = 0; i < 100; i++)
data.addRow([Math.floor(Math.random()*100),
Math.floor(Math.random()*100)]);
var options = {
legend: 'none',
crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Play with it until you get the necessary results you need.

Modify CKEditor Advanced tab contents

I'm using CKEditor and would like to modify the content of the Advanced tab
I'd only like the Style input to appear, any ideas on how to do this?
Thanks for any and all help!
I solved it!
Here's some code to help you other guys out:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog window name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
var advancedTab = dialogDefinition.getContents('advanced');
var infoTab = dialogDefinition.getContents('info');
var styleField = advancedTab.get('advStyle');
advancedTab.remove();
advancedTab.remove('advTitle');
advancedTab.remove('advContentType');
advancedTab.remove('advCSSClasses');
advancedTab.remove('advCharset');
advancedTab.remove('advRel');
//var urlField = infoTab.get('url');
//urlField['default'] = 'www.ireadhome.com'; //set default value for the url field
}
});
Paste this code into your config.js. Hope it helps you out!

How can I change focus between panels in a StackPanel using GAS

I have a stackpanel containing 3 panels.
After the user clicks a button on page-1, I want page-2 to become visible.
How can I achieve this?
Edit-1
As I thought the question I asked really is a general one, I did not provide code.
But Serge insas and Zig Mandell asked for code, so here it is.
function doGet()
{
var app = UiApp.createApplication();
var stackPanel = app.createStackPanel().setSize('100%', '100%'); //Create stack panel
var onClick = app.createServerHandler('onClick');
var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);
//add widgets to each stack panel, and name the stacked panels
stackPanel.add(app.createLabel('Text on first panel...'), 'One');
stackPanel.add(button, 'Two');
stackPanel.add(app.createLabel('Text on third Panel...'), 'Three');
app.add(stackPanel); //Add the panel to the application
return app;
}
function onClick(e)
{
Logger.log('In onClick --> show stackPanel "Three" now');
}
In this example I would like to show panel Two at startup and after clicking the button I would like to show panel 3.
I tried using focusPanels, but that didn't help
function doGet()
{
var app = UiApp.createApplication();
var stackPanel = app.createStackPanel().setSize('100%', '100%'); //Create stack panel
// FocusPanels are limited to contain ONE widget
var focusOne = app.createFocusPanel().setId('focusOne');
var focusTwo = app.createFocusPanel().setId('focusTwo');
var focusThree = app.createFocusPanel().setId('focusThree');
// Create panels to overcome the one-widget-limitation of focuspanels
var ver = app.createVerticalPanel().setId('ver');
var hor = app.createHorizontalPanel().setId('hor');
var tab = app.createTabPanel().setId('tab');
var tabOne = app.createVerticalPanel().setId('tabOne');
var tabTwo = app.createHorizontalPanel().setId('tabTwo');
tab.add(tabOne, 'One').add(tabTwo, 'Two');
focusOne.add(ver);
focusTwo.add(hor);
focusThree.add(tab);
var labOne = app.createLabel('Text on first panel...');
var labThree = app.createLabel('Text on second tab of third panel...');
var onClick = app.createServerHandler('onClick');
var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);
ver.add(labOne);
hor.add(button);
tabTwo.add(labThree);
tab.selectTab(1); // Select second tab
//add widgets to each stack panel, and name the stack panel
stackPanel.add(focusOne, 'stackOne').add(focusTwo, 'stackTwo').add(focusThree, 'stackThree');
app.add(stackPanel); //Add the panel to the application
return app;
}
function onClick(e)
{
Logger.log('In onClick --> show focusPanel "Three" now');
var app = UiApp.getActiveApplication();
var focusThree = app.getElementById('focusThree');
focusThree.setFocus(true);
return app;
}
Unfortunately this has been the subject of an enhancement request for quite a while (dec 2012) but I'm afraid Google won't do anything about it since they stopped UiApp development (they recommend switching to HTMLService).
You could eventually use tabPanel instead, this one has all the necessary features.
Test here
code below :
function doGet() {
var app = UiApp.createApplication();
var tabPanel = app.createTabPanel().setSize('100%', '100%').setId('tabP'); //Create tab panel
var onClick = app.createServerHandler('onClick');
var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);
//add widgets to each tab panel, and name the tabed panels
tabPanel.add(app.createLabel('Text on first panel...'), 'One');
tabPanel.add(button, 'Two');
tabPanel.add(app.createLabel('Text on third Panel...'), 'Three');
app.add(tabPanel); //Add the panel to the application
tabPanel.selectTab(1);
return app;
}
function onClick(e){
var app = UiApp.getActiveApplication();
var tabP = app.getElementById('tabP').selectTab(2);
return app;
}

google script unable to update web page

Below is snippet where I create a web page / app and show a list. Then on click of item in list I want to replace the list with another list. I try it by using vertical panel as root container and clearing and adding list to it. The web page though keeps showing old list even after handler for new list executes fine.
//user_list function updates vertical panel but the web page still shows old rep_list
function doGet(e) {
if(e == null || e.parameter.dvid == null) {
return rep_list();
}
}
function user_list(path) {
var app = UiApp.getActiveApplication().setTitle("List Folders");
var content = app.getElementById('root');
content.clear();
var list = app.createListBox();
//populate list
content.add(list);
return app;
}
function rep_list () {
var app = UiApp.createApplication().setTitle("List Repositories");
var content = app.createVerticalPanel().setId('root');
var list = app.createListBox(true).setId('repoList').setName('repo');
var handler = app.createServerHandler("listFolders");
list.addClickHandler(handler)
//populate list
content.add(list);
app.add(content);
return app;
}
function listFolders(e){
var repo = e.parameter.repo;
user_list(repo);
}
Regards,
Miten.
Your listFolders() function isn't returning a new UI instance. Try:
function listFolders(e){
var repo = e.parameter.repo;
var app = user_list(repo);
return app;
}

showDocsPicker - Add to a popup?

I have a gadget that is very small and placed in a sidebar such that its size is about 100px wide. I have a button that when clicked opens the showDocsPicker. I am looking for a solution where I can add the UI of the showDocsPicker to a popup or something such that the full view of the dialog can be seen... Can anyone point me in the right direction? I've seen this in the documentation which is not encouraging:
"Unlike most UiApp objects, DocsListDialog should not be added to the UiInstance."
Anyone else try this?
Here is a sample code which will open docsPicker in fullView.
function doGet(){
var app = UiApp.createApplication();
var btn = app.createButton('Show Docs Picker');
app.add(btn);
var handler = app.createServerHandler('showdocsPicker_');
btn.addClickHandler(handler);
return app;
}
function showdocsPicker_(e){
var app = UiApp.getActiveApplication();
var handler = app.createServerHandler('listSelectedDocs_');
app.createDocsListDialog().showDocsPicker().addSelectionHandler(handler).setMultiSelectEnabled(true)
//for multiple selection
.setMultiSelectEnabled(true);
return app;
}
function listSelectedDocs_(e){
var app = UiApp.getActiveApplication();
for(var i in e.parameter.items){
for(var j in e.parameter.items[i]){
app.add(app.createLabel(e.parameter.items[i][j]));
}
app.add(app.createLabel('-------------'))
}
return app;
}