Google Script Table Chart link as text - javascript

I am working with a google script to make my data show in a more user friendly way then just a huge spreadsheet with multiple people filtering at the same time.
Using script shown further below I was able to create :
My problem is the red highlighted part. this column (the next as well) would always either be blank or show a link. Now this is an example so it is a short link which you could easily copy from there and paste to the top.
1.What I want to achieve: is to have that link clickable (redirect link in the spreadsheet) 2.Ideally I would set up in spreadsheet a word like "link" with a hyperlink like "https://www.google.de/" and you would then in the chart just click the word link and it takes you to the link.
Below I will add the script I have been using so far.
//Get the spreadSheet Url
var ssKey ="-Link to Spreadsheet-";
function doGet()
{
var uiApp = UiApp.createApplication().setTitle("Database");
var ss = SpreadsheetApp.openByUrl(ssKey);
//Get the compelte data from sheet name "-Name-"
var dataRange = ss.getSheetByName("OPEN").getDataRange().setNumberFormat
('#STRING#');//getRange(1, 1, lastRow, lastColumn);
//To provide a category or dprodown filter
var oneFilter = Charts.newCategoryFilter().setFilterColumnLabel("Type of Request").build();
var secondFilter = Charts.newCategoryFilter().setFilterColumnLabel("Work: Business").build();
var thirdFilter = Charts.newCategoryFilter().setFilterColumnLabel("Work: ").build();
var forthFilter = Charts.newStringFilter().setFilterColumnLabel("IDEA").build();
var fifthFilter = Charts.newCategoryFilter().setFilterColumnLabel("REGION / FUNCTION").build();
var sixthFilter = Charts.newCategoryFilter().setFilterColumnLabel("-name of filter 6-").build();
// To get data of spreadhseet in table format
var tablechart = Charts.newTableChart()
.setDimensions(1750,1000)
.setOption('allowHtml',true)
.setOption('width', '100%')
.setOption('lenght', '100%')
.enablePaging(10)
.build();
// To Add Age filter and table data in dashboard
var dashboard = Charts.newDashboardPanel()
.setDataTable(dataRange)
.bind([oneFilter,secondFilter,thirdFilter,forthFilter,fifthFilter,sixthFilter],[tablechart]).build();
var app = UiApp.createApplication()
var filterPanel = app.createHorizontalPanel();
var filterPanel2 = app.createHorizontalPanel();
var chartPanel = app.createVerticalPanel();
filterPanel.add(oneFilter).add(secondFilter).add(thirdFilter).setSpacing(10);
filterPanel2.add(forthFilter).add(fifthFilter).add(sixthFilter).setSpacing(10);
chartPanel.add(tablechart).setSpacing(10);
dashboard.add(app.createVerticalPanel().add(filterPanel).add(filterPanel2).add(chartPanel));
app.add(dashboard);
return app;
}

To create a link from the script, you'll have to set the value of the cell as if it was a formula you are writting within the Spreadsheet. For this, we will use 'HYPERLINK(url, value)' into the cell. You can perhaps create a method that will create the string with the formula, and just set that value to the cell.
Try this approach:
function getHyperLink(url,val) {
return "=HYPERLINK("+"\""+url+"\""+","+"\""+val+"\""+")";
}
//Example to obtain the value of the url and the text to set in as a link
var aSheet = SpreadsheetApp.getActiveSheet();
var curRow = aCell.getRow();
var val = aSheet.getRange(curRow, 0).getValue();
var url = aSheet.getRange(curRow, 1).getValue();
aSheet.getRange(curRow, 2).setHorizontalAlignment('center').setValue(getHyperLink(url,val));

Related

adding multiple tables from one Javascript function

Can someone suggest a solution for below:
I am taking inputs from a CSV file using javascript. On a button click, I would like to update two tables in HTML. I have set two dvis; dvCSV and alld.
When I click on button the table only gets updated in "alldc" not in "dvCSV".
If I remove var alld =......upto "alld.appendChild(table);" then only "dvCSV" table gets updated with the data.
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
var alld = document.getElementById("alld");
alld.innerHTML = "";
alld.appendChild(table);

Fusion Charts , JavaScript data click events C#

I am creating fusion charts in .net, and Its working fine.
Chart MyFirstChart = new Chart(chartType, chartName, "100%", height.ToString(), "json", jsonData.ToString());
Data is collected from data table from SQL server and converted to JSON string.
My data table has the following data :
Date
No of students
Percentage
Name of Department
I would like to add an event that if a data plot is clicked more details are shown by showing data from a different data table, which contains more details of that Department.
I added the event:
MyFirstChart.AddEvent("dataPlotClick" , "dataPlotClick");
// render chart
return MyFirstChart.Render();
And called this event in a Javascript
<script>
dataPlotClick = function (eventObj, dataObj) {
console.log(eventObj);
var header = document.getElementById('header');
header.style.display = 'block';
var tempDiv = document.createElement('div');
var attrsTable = document.getElementById('attrs-table');
var titleDiv, valueDiv;
for (var prop in dataObj) {
titleDiv = document.createElement('div');
titleDiv.className = 'title';
titleDiv.innerHTML = prop;
valueDiv = document.createElement('div');
valueDiv.className = 'value';
valueDiv.innerHTML = dataObj[prop];
tempDiv.appendChild(titleDiv);
tempDiv.appendChild(valueDiv);
}
attrsTable.innerHTML = '';
attrsTable.appendChild(tempDiv);};
</script>
The click on data plot works fine, but its gets the data of the current data table, and I would like to get the more detailed data table and show in a table view in the asp page.
Is there a way to do that?

How do I script a photo from Google Form upload and set its size to 1 inch for display in a template?

I am trying to make an application that requires the applicant's photos to be attached. How do I script a photo from Google Form upload and set its size to 1 inch for display in a template? Thank you so much :)
My code
function onFormSubmit(e){
var fullname = e.values[1];
var address = e.values[2];
var phone = e.values[3];
var email = e.values[4];
var photo = e.values[5];
var copyId = DriveApp.getFileById('1tO7L1tWbwMvMyfJGCQB2cONOCyai_ZCIYt_VnDBBnBo')
.makeCopy('Application'+'_2020-'+fullname)
.getId();
var copyDoc = DocumentApp.openById(copyId);
copyDoc.getBody()
var copyBody = copyDoc.getActiveSection();
copyBody.replaceText('keyfullName', fullname);
copyBody.replaceText('keyaddress', address);
copyBody.replaceText('keyphone', phone);
copyBody.replaceText('keyemail', email);
copyBody.replaceText('keyphoto', photo);
copyDoc.saveAndClose();
}
This requires a few pre-steps as you are not replacing text but entering an actual image. You will need to get the image from the id in the url of e.values(5), then find the position of your placeholder text in the doc, add it and format it.
As said in the comments, you can only set size by pixels not inch.
I wrote only the code parts necessary for that and left out your other replacements. There might be cleaner ways to do this, but this one worked for me.
function onFormSubmit(e) {
var photo = e.values[5]
// get the actual image based on the trimmed drive url
var image = DriveApp.getFileById(photo.replace('https://drive.google.com/open?id=', ''))
.getBlob();
var copyId = DriveApp.getFileById('1tO7L1tWbwMvMyfJGCQB2cONOCyai_ZCIYt_VnDBBnBo')
.makeCopy('Application'+'_2020-'+fullname)
.getId();
// you can get the body in one go
var copyBody = DocumentApp.openById(copyId).getBody();
// find the position where to add the image
var position = copyBody.findText('keyphoto').getElement()
var offset = copyBody.getChildIndex(position.getParent())
// add the image below and resize it
var insertedImage = copyBody.insertImage(offset +1,image).setHeight(100).setWidth(100)
// align it to the right
var styles = {};
styles[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
insertedImage.getParent().setAttributes(styles)
// remove the keyphoto placeholder text
position.removeFromParent()
}
Further resources on the methods:
Inserting a Google Drive image into a document using Google Apps Script
Google apps script: How to horizontally align an inlineImage

How do I pull All data in one Google Sheet to another Google Sheet Tab using Google App Script?

My manager and I are stuck!
What we are trying to do is pull all of the data from one google sheet to the first tab on another google sheet using google App Script. They are located in 2 separate folders as well.
We don't want to use =importrange() basic because it doesn't actively update the sheet! We are trying to automate our systems!
we tried using this and it was a no go.
function CopyRange() {
var sss = SpreadsheetApp.openById('1vuqVDFLYc0pee0qITCQoL6ZXAOlzVl5Efg88F8mA39I'); //replace with source ID
var ss = sss.getSheetByName('Bob Swope - Flow'); //replace with source Sheet tab name
var range = ss.getRange('A2:AL1000'); //assign the range you want to copy
var data = range.getValues();
var tss = SpreadsheetApp.openById('17SZH2yKWuD1fonf-hOV1bpUumuOf5S24NI_V2Q0ITWo'); //replace with destination ID
var ts = tss.getSheetByName('input'); //replace with destination Sheet tab name
}
function movingData() {
var sss=SpreadsheetApp.getActive();//assuming this script is contained within this spreadsheet other you might wish to use openById();
var dss=SpreadsheetApp.openById('SSID');//open destination spreadsheeet by id
var dsh=dss.getSheets()[0];//first sheet on the left
var shts=sss.getSheets();//array of all sheets
//loop through all sheets getting data and appending to dsh
shts.forEach(function(sh,i){
var v=sh.getDataRange().getValues();
dsh.getRange(dsh.getLastRow()+1,1,v.length,v[0].length).setValues(v);
});
}
Class SpreadsheetApp
Assuming that you might wish to exclude some sheets from the source. Then something like this might be useful.
function movingData() {
var exclA['Sheetnames','To','Exlude']
var sss=SpreadsheetApp.getActive();
var dss=SpreadsheetApp.openById('SSID')
var dsh=dss.getSheets()[0];
var shts=sss.getSheets();
shts.forEach(function(sh,i){
if(exclA.indexOf(sh.getName())==-1) {
var v=sh.getDataRange().getValues();
dsh.getRange(dsh.getLastRow()+1,1,v.length,v[0].length).setValues(v);
}
});
}

Fetching values from an element in an iframe on the same domain

I'm trying to condense two processes down in to one by having the two pages I need on one page using an iframe.
I have a page that contains a text area (used for sending an email) and then I have a purchase reference page that contains the details of someones purchase.
I'm trying to append an iframe of the purchase page to the bottom of my email page and then grab some data that's on it and insert it in to the text area.
EDIT: This is what I have so far:
Script one
//Grabs the selected purchase number
var purchaseNumber = window.getSelection();
purchaseNumber = purchaseNumber.toString();
var purchaseTitle;
var purchaseNumber;
function frameLoaded() {
purchaseTitle = window.frames['purchaseIframe'].contentDocument.getElementById ('listingTitle');
purchaseNumber = window.frames['purchaseIframe'].contentDocument.getElementById ('auctionSoldIdDisplay');
purchaseTitle = purchaseTitle.innerHTML;
purchaseNumber = purchaseNumber.innerHTML
var purchaseDetails = purchaseTitle + " - " + purchaseNumber;
insertText = insertText.replace("PURCHASEDETAILS", purchaseDetails);
}
if(purchaseNumber.length > 0){
var purchaseIframe = document.createElement('iframe');
purchaseIframe.src = 'http://www.mysite.co.nz/Admin/Listing/PurchaseDisplay.aspx?asid=' + purchaseNumber + '&submit1=++GO++';
purchaseIframe.setAttribute("height","1000");
purchaseIframe.setAttribute("width","100%");
purchaseIframe.setAttribute("id","purchaseIframe");
purchaseIframe.setAttribute("onload", "frameLoaded();");
void(document.body.appendChild(purchaseIframe));
alert(purchaseNumber);
}
Script Two
//Gather the selected template
var selectedTxt = document.getElementById('txtEmailText').value;
//Change the selected txt to a string
var insertText = selectedTxt.toString();
var purchaseTitle = window.frames['purchaseIframe'].contentDocument.getElementById ('listingTitle');
var purchaseNumber = window.frames['purchaseIframe'].contentDocument.getElementById ('auctionSoldIdDisplay');
purchaseTitle = purchaseTitle.innerHTML;
purchaseNumber = purchaseNumber.innerHTML
var purchaseDetails = purchaseTitle + " - " + purchaseNumber;
insertText = insertText.replace("PURCHASEDETAILS", purchaseDetails);
//Pasting the variable in to the textarea
document.getElementById('txtEmailText').value = insertText;
Effectively I am highlighting the purchase reference number on the page then executing this script to open the purchase page using the highlighted number. I am then grabbing the text values of the elements I need and pasting them in to the text area.
I'm still pretty new to javascript and am teaching myself as I go.
If i run the above scripts one after the other then it works like a charm, however if I try to run them together with the second in an onload() function set to the iframe then it won't.
Any help would be greatly appreciated or if you could point me in the direction of an article to help.
My first thought is that the iframe is not fully loaded before you try to get the values from it. My thought would be to try adding an onload event to your iframe and then when it loads invoke a function that grabs the value.
I would add purchaseIframe.setAttribute("onload", "frameLoaded();"); to your purchaseIframe block and then add the frameLoaded() function to your script. something like:
function frameLoaded() {
var purchaseTitle = window.frames[0].document.getElementById("listingTitle" );
var purchaseNumber = window.frames[0].document.getElementById("auctionSoldIdDisplay");
console.log(purchaseTitle.innerHTML);
console.log(purchaseNumber.innnerHTML);
}
And see if something like that grabs the right values. If it does than you can plug it in where you need it.
Am I understanding your problem correctly?

Categories

Resources