hangouts api cards trimming text - html

Im trying to send large descriptions inside a card using the google hangout api; but unfortunately the text is being trimmed when its too long.
Below is a sample of the card I send:
"cards": [{
"sections": [{
"widgets": [{
"keyValue": {
"topLabel": "Label",
"content": "Long Description goes here..."
}
}
]
}
]
}
]
When I look at the html received by the bot the content is in a dive with white-space: nowrap;...
I tried placing the content in a div and giving it white-space: wrap; as such
"content": "<div style='white-space: wrap;'>Long Description...</div>", but the bot just removes that div when it sends the card.
I also noticed that on pc browser the text was trimmed at 43 characters, so I used regex to add \n at every 43 character using .replace(/.{42}/g, '$&\n'), which kind of works but on mobile the card seems to trim messages even more...
Anyway I could simply remove that annoying white-space style??
EDIT
I know about this post, but it tries to increase width of the card (which technically would work for me), and there were no solutions...

It is possible to do it and very simple:
You only have to add contentMultiline: true to your KeyValue property.
"cards": [{
"sections": [{
"widgets": [{
"keyValue": {
"topLabel": "Label",
"content": "The working day is thus not a constant, but a variable quantity. One of its parts, certainly, is determined by the working-time required for the reproduction of the labour-power of the labourer himself. But its total amount varies with the duration of the surplus labour. The working day is, therefore, determinable, but is, per se, indeterminate.",
"contentMultiline": true,
}
},
]
}
]
}
]
Here you'll find the documentation of KeyValue fields:
https://developers.google.com/hangouts/chat/reference/rest/v1/cards#keyvalue

Related

Getting around Prismic's lack of <blockquote> element capability in rich text editor

I started using Prismic as a headless CMS for a previous project, and it worked fine, but on a second project, I ran into a problem that surprised me, and that is Prismic's inability to do a simple blockquote. Considering that this HTML element has been around in HTML for decades, it blows my mind. According to their docs and forum responses, they are considering adding it to their editor, but you have to jump through hoops by using labels and applying them to your text, and this just wraps the text in <span> tag that has a class of your label name. In your front end, you then have to target those spans with CSS.
The problem with this in their Rich Text editor, if you have a multi-paragraph block that you want to quote inside of a larger body of text, the editor treats them as multiple paragraphs, so in your output, instead of one big block - like you would get with a standard <blockquote> tag - you get multiple paragraphs wrapped in individual <span> tags, which is more difficult to make look like one block with just CSS.
<p><span class="my-label">Paragraph 1 text</span></p>
<p><span class="my-label">Paragraph 2 text</span></p>
<p><span class="my-label">Paragraph 3 text</span></p>
<p><span class="my-label">Paragraph 4 text</span></p>
I'm doing this inside a Nuxt app using v-html, and since highlighted text could be anywhere inside a larger body of text, I really don't want to have to do code gymnastics inside an html serializer or the api data to identify the labeled items. I really don't want to have to switch to another CMS or local markdown just to get around this.
When I've tried targeting the tags, it gets challenging trying to do it so that everything looks like one large block.
Does any Prismic user know a way I can actually get a <blockquote> tag in the content in the Prismic editor itself? There's not an option to edit the raw html in their editor, and even with slices, I haven't seen a way to insert a tag in the content.
Is there a simple way with CSS to target those multiple paragraphs so that they look like one block? I'm not a CSS guru, and it looks like it requires some fine tuning with padding and line heights.
Regarding a solution on Prismic's end, using slices the idea would be to use the slice zone to have a simple "RichText" slice for basic text and another "BlockQuote" slice for doing fancy quotes. Slice definition could look like this:
{
"type": "Slices",
"fieldset": "Slice zone",
"config": {
"labels": {
"richtext": [],
"blockquote": []
},
"choices": {
"richtext": {
"type": "Slice",
"fieldset": "Rich Text",
"description": "Rich text slice",
"icon": "reorder",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
},
"blockquote": {
"type": "Slice",
"fieldset": "Block Quote",
"description": "Block Quote slice",
"icon": "format_quote",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
}
}
}
}
Then it would be just about looping through the array, something in that fashion:
<template>
<prismic-rich-text v-for="slice in document.data.body" :field="slice.primary.text" :class="slice.slice_type" />
</template>

Combining reply and postback buttons

How do I combine action buttons of multiple types (reply and postback) within one message? Example:
{
"type":"text",
"text":"The more you know, am I right? Would you like to learn...",
"actions":[
{
"type":"postback",
"text":"From a human",
"payload":"Edu - human"
},
{
"type":"reply",
"text":"From content",
"payload":"Edu - content"
},
{
"type":"reply",
"text":"From your peers",
"payload":"Edu - community"
},
{
"type":"reply",
"text":"Something else",
"payload":"Something else"
},
{
"type":"reply",
"text":"just to test",
"payload":"just to test"
}
],
"role":"appMaker",
"name":"Flowdev"
}
The example above is just not shown in Smooch chat. If I change first action type to reply or change other three to postback the message will be shown.
postback actions can be combined with other persistent button types (link/buy/etc.)
reply actions cannot be combined with persistent buttons.

Huginn: Extract text from html tag using Website Agent css selector

I'm trying to understand how the web-scraping is done in Huginn but I cannot find proper documentation on the options available.
I'd like to extract the price of the Gold oz. from this website for example:
https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD
For which I use a Huginn Website Agent with this code:
{
"expected_update_period_in_days": "2",
"url": "https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD",
"type": "html",
"mode": "on_change",
"extract": {
"price": {
"css": ".converterresult-toAmount",
"value": "."
}
}
}
I got the css selector using SelectorGadget and I've tried multiple values like: ./node(), string(.), normalize-space(.), . , //text() and others, but I cannot find the way to extract the content of the span html tag that contains that value. Here the code of that section of the web:
<span class="converterresult-toAmount">1,730.35</span>
And what I want to extract is: 1,730.35
i got it working on another site.
i used "xpath" for it.
I used a different site because it wouldn't work on the one you posted.
But i hope this still helps someone.
{
"expected_update_period_in_days": "2",
"url": "https://walletinvestor.com/converter/xau/usd/1",
"type": "html",
"mode": "on_change",
"extract": {
"gold_in_dollar_price": {
"xpath": "/html/body/div[4]/div/div[3]/div[1]/h2/strong/span",
"value": "string(.)"
}
}
}
Here is how you get the XPath of any Element/Object on a website:
(i used Yandex Browser based on chrome for this)
Open the Developer Tools in the Browser (or right click and select "Inspect element code")
Select / Click with the Inspector on your Element/Object
You should now see something like:
<span class="converterresult-toAmount">1,730.35</span>
Right click on this and click: "copy" > "Copy XPath"
Im using Huginn since 2 Days so anyone feel free to tell me any faster way if there is any :)

how to target links in a drop down menu when front-end testing

I am venturing into front-end testing. To make this task feel a bit easier I am using selenium builder, but I am struggling to target links on a drop down menu and on a rotating banner.
For simplicity I will stick with the drop down menu as an example (I assume that they are both going to be solved by targeting the correct path)
Selenium builder generates a JSON file. I think adjusting this file could be the answer to my problems, but I am struggling to work out what adjustments I can make to target the link I am after.
the HTML I am targeting
<div id="locale-switcher" style="display: none">
<li class="language-switcher OneLinkNoTx">
Select language
<ul id="language-options">
<li><a class="modal-link" href="#currency-change" rel="/uk/store/" onclick="confirmStoreSwitch(this.rel);">English</a></li>
<li><a class="modal-link" href="#currency-change" rel="/other/store/" onclick="confirmStoreSwitch(this.rel);">Other</a></li>
</ul>
</li>
</div>
the generated json file
{
"type": "script",
"seleniumVersion": "2",
"formatVersion": 2,
"steps": [
{
"type": "get",
"url": "http://www.mySite.co.uk/uk/store/"
},
{
"type": "clickElement",
"locator": {
"type": "link text",
"value": "English"
}
}
],
"data": {
"configs": {},
"source": "none"
},
"inputs": []
}
The program also suggests alternative to target a desired element, in this case:
"type": "clickElement" suggested alt1:
"locator": {
"type": "css selector",
"value": "a.modal-link"
}
"type": "clickElement" suggested alt2:
"locator": {
"type": "xpath",
"value": "//ul[#id='language-options']//a[.='English']"
}
"type": "clickElement" suggested alt3
"locator": {
"type": "xpath",
"value": "//div[1]/header/nav/ul/li[1]/ul/li[1]/a"
}
But non of these suggestions are working. How can I target the required element?
I finally solved it. The answer was not adjusting the JSON file as it seems that even if you pass valid JSON it may not be read by selenium builder.
Ultimately the answer was getting the correct xpath and not trying to click the element but verify its there, store it and retrieve it.
To get an xpath (using firebug)
Navigate to the link you are targeting
Right click and select "inspect element with firebug"
Right click on the element(or text) itself and select copy xpath
Selenium builder will also provide you with the xpath just by clicking on the link but it will set the command clickElementAttribute you will need to change this.
The order I took to target a drop down menu item in selenium builder is listed below:
get [www.myHomePage.com]
verifyTextPresent [visible menu link]
storeElementAttribute locator [xpath to hidden item], attribute name href, variable link
verifyElementAttribute locator [xpath to hidden item], attribute name href, variable ${link}
get ${link}
waitForCurrentUrl [the/url/you/are/targeting]
Please note link and ${link} are variables and should be written as they are written above. You could use the same technique for a rotating banner, alternatively you could use the command waitForTextPresent the clickElementAttribute

Custom Chrome URL suggestions

One of the neat things about Chrome is that, if you type a word on the address bar, it suggests what relevant URLs might be. For example if I type "New York", it suggests nytimes.com
Can an extension be developed that provides customized suggestions? For instance, if I have an internal company website, say foo which hosts documents with numeric IDs - say http://domain.com/123 or http://domain.com/234. When someone types "123" on the browser address bar, I want http://domain.com/123 to show as a suggestion (even if it has never been accessed before).
Is something like this possible? If so, I would love some pointers (I've never developed a Chrome extension, but if possible, I can look things up and get this implemented).
Thanks!
Raj
Yes, it is possible through Omnibox, https://developer.chrome.com/extensions/omnibox.html
I have written a sample implementation here :
Manifest File:
{
"name": "Omnibox Demo",
"description" : "This is used for demonstrating Omnibox",
"version": "1",
"background": {
"scripts": ["background.js"]
},
"omnibox": {
"keyword" : "demo"
},
"manifest_version": 2
}
JS File:
chrome.omnibox.setDefaultSuggestion({"description":"Search %s in Dev Source Code"});
chrome.omnibox.onInputStarted.addListener(function() {
console.log("Input Started");
});
chrome.omnibox.onInputCancelled.addListener(function() {
console.log("Input Cancelled");
});
chrome.omnibox.onInputEntered.addListener(function (text) {
console.log("Input Entered is " + text);
});
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
console.log('inputChanged: ' + text);
suggest([
{content: text + " one", description: "the first one"},
{content: text + " number two", description: "the second entry"}
]);
});