Gmail add-ons: Conditional Homepage Content
There may be times when you want to present different content in your add-on's homepage depending on certain conditions.
For example, I want to present a card to the user when they run my add-on for the first time (I'll call it 'card-A'), but present a different card for each subsequent time the add-on is run ('card-B').
I will need to keep track somehow, so I will use apps-script's property service to retain the information. (Note: for this example, I will use script property service, but you will probably want to use user property service for each individual user if anyone else will be using the add-on).
function onHomepage() {
//The first thing to do is get the script properties and check the content:
const scriptProperties = PropertiesService.getScriptProperties();
const runStatus = scriptProperties.getProperty('first_run');
//After giving it some thought, I don't need to present different cards to the user, just different card content. So I then declare the content that will be variable depending on the runStatus. (In this simple example, the card title and card image will be variable, but this could get very complex depending on your needs):
let cardTitle, cardImgUrl;
//Next, create logic to determine the content.
if (!runStatus || runStatus == 'false') {
//If the runStatus doesn't exist (or is false for some reason), set it to true:
scriptProperties.setProperty('first_run', 'true');
//Then set the content:
cardTitle = "This is the first run"
cardImgUrl = "https://cdn.iconscout.com/icon/premium/png-64-thumb/archive-367-805738.png"
} else {
cardTitle = "This is the second run"
cardImgUrl = "https://cdn.iconscout.com/icon/free/png-128/peace-symbol-5187582-4326073.png"
}
var cardHeader = CardService.newCardHeader()
.setTitle(cardTitle)
.setImageStyle(CardService.ImageStyle.CIRCLE)
.setImageUrl(cardImgUrl);
var card = CardService.newCardBuilder()
.setName("Homepage")
.setHeader(cardHeader)
.build();
return card;
}
Here is the complete code:
function onHomepage() {
const scriptProperties = PropertiesService.getScriptProperties();
const runStatus = scriptProperties.getProperty('first_run');
let cardTitle, cardImgUrl;
if(!runStatus || runStatus == 'false') {
scriptProperties.setProperty('first_run', 'true');
cardTitle = "This is the first run"
cardImgUrl =
"https://cdn.iconscout.com/icon/premium/png-64-thumb/archive-367-805738.png"
} else {
cardTitle = "This is the second run"
cardImgUrl =
"https://cdn.iconscout.com/icon/free/png-128/peace-symbol-5187582-4326073.png"
}
var cardHeader = CardService.newCardHeader()
.setTitle(cardTitle)
.setImageStyle(CardService.ImageStyle.CIRCLE)
.setImageUrl(cardImgUrl);
var card = CardService.newCardBuilder()
.setName("Homepage")
.setHeader(cardHeader)
.build();
return card;
}
Hopefully this gives you some ideas you can try for yourself!
Comments
Post a Comment