I am sending some message activity and choice prompts using Hero card as below
firstMessage.inputHint = InputHints.IgnoringInput;
await stepContext.context.sendActivity(firstMessage);
secondMessage = MessageFactory.carousel(boltOnDataMap);
await stepContext.context.sendActivity(secondMessage);
let getNameByType: Object = {
intent: "intent.bundle.get_name_by_type",
"entities": [
{
"entity": "giga",
"type": "ent.mobile_data",
"score": 1,
"canon": "giga"
}
]
};
let promptChoices: CardAction[];
promptChoices = [
{
value: ssoUrl,
type: ActionTypes.OpenUrl,
title: getText(
"show-button:button.txt"
),
},
{
value: getNameByType,
type: ActionTypes.PostBack,
title: getText(
"show-button-2:button2.txt"
),
},
];
const attachment: Partial<Activity> = MessageFactory.attachment(
CardFactory.heroCard(null, null, promptChoices)
);
const promptOptions: PromptOptions = {
prompt: {
...attachment,
inputHint: InputHints.ExpectingInput,
},
choices: ChoiceFactory.toChoices(promptChoices),
};
return await stepContext.prompt(
this.promptsNames.CHOOSE_BOLTONS,
promptOptions
);
Everything is displayed properly on iOS devices but on Android firstMessage does not get displayed. PFA the screenshot below
If I remove the prompt options, firstMessage gets displayed on Android device as well.
I checked this link Waiting method in Bot Framework v4 to confirm I am adding the prompt options correctly and the code looks similar.
Am I doing something wrong, which is causing the text(firstMessage) not be displayed on Android.
Related
I have requirement to style (change the color of link instead blue) and change the text in auth card in Search message extension. I tried to pass all parameters. But nothing appear to impact. I also tried to generate an Adpative card with text having link. But link doesnt have styling option.
This is code , I am using right now :
return new MessagingExtensionResponse
{
ComposeExtension = new MessagingExtensionResult
{
Type = "auth",
SuggestedActions = new MessagingExtensionSuggestedAction
{
Actions = new List<CardAction>
{
new CardAction
{
Type = ActionTypes.OpenUrl,
Value = signInLink,
Title = "Sign in"
},
},
},
},
};
Adaptive Card Json Tried:
{
"type": "TextBlock",
"text": "Please [Sign in](https://adaptivecards.io)"
}
I tried o replace crad action as suggested below, but it didnt work.
`
private async Task GetAuthCard(ITurnContext turnContext, CancellationToken cancellationToken)
{
// Retrieve OAuth Sign in Link
string signInLink = await GetSignInLinkAsync(turnContext, cancellationToken).ConfigureAwait(false);
AuthCardModel auth = new();
auth.AdaptiveCardPath = Path.Combine(".", "Resources", "AuthCardTemplate.json");
auth.signinLink = signInLink;
Attachment adaptiveCard = CreateAdaptiveCardActivity(auth.AdaptiveCardPath, auth);
_logger.LogWarning($"[TeamsBot LogIn adaptive card] -> {JsonConvert.SerializeObject(adaptiveCard)}");
MessagingExtensionAttachment attachment = new MessagingExtensionAttachment
{
ContentType = ThumbnailCard.ContentType,
Content = adaptiveCard.Content,
};
return new MessagingExtensionResponse
{
ComposeExtension = new MessagingExtensionResult
{
Type = "auth",
AttachmentLayout = "list",
Attachments = new List<MessagingExtensionAttachment> { attachment },
},
};
}
`
AuthCardTemplate.json :
`
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "__ * * Sign in * * __"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
`
Teams Does not support Card action button styling in cards. This is by design. Markdown is a simple way to format text that looks great on any device. It doesn’t do anything fancy like change the font size, color, or type — just the essentials.
Document-https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/text-features#markdown-commonmark-subset
I had a question regarding Teams Microsoft Bot framework. Whenever my bot sends an adaptive card, the top and the bottom of the photo continue to cut off. Inside the adaptive card is the hero card image, it seems I'm unable to resize it to make it fit. I've tried making the image smaller and larger to see if that would fix the issue. Below is a screenshot of the issue I am having.
I'm hoping someone has run into the same issue and if this is fixable or not. Thank you.
Image being used; https://imgur.com/a/hkcSkrJ
public async Task<SendResult> SendAsync(NotificationTeamsAttempt attempt)
{
try
{
if (string.IsNullOrWhiteSpace(attempt.ConversationId))
throw new Exception("Conversation Id is required.");
if (string.IsNullOrWhiteSpace(attempt.ServiceUrl))
throw new Exception("Service Url is required.");
using (var connector = new ConnectorClient(new Uri(attempt.ServiceUrl), _clientId, _clientSecret))
{
var activity = MessageFactory.Text("");
activity.Attachments.Add(attempt.Attachment());
activity.Summary = attempt.Summary();
var response = await connector.Conversations.SendToConversationAsync(attempt.ConversationId, activity);
return new SendResult
{
IsSuccess = true,
DispatchId = response.Id
};
}
}
catch (Exception exception)
{
return new SendResult
{
IsSuccess = false,
Exception = exception
};
}
}
public override Attachment Attachment()
{
var card = new ThumbnailCard
{
Title = "Post submitted for review by " + DraftAuthor,
Subtitle = DraftTitle,
Text = DraftDescription,
Images = new List<CardImage>(),
Buttons = new List<CardAction>()
};
if (!string.IsNullOrWhiteSpace(TeamsUrl))
{
card.Buttons.Add(new CardAction
{
Type = "openUrl",
Title = "Review in Teams",
Value = TeamsUrl.Replace("null", $"%22post%7C{DraftId}%7C{DraftId}%22")
});
}
if (!string.IsNullOrWhiteSpace(SPUrl))
{
card.Buttons.Add(new CardAction
{
Type = "openUrl",
Title = "Review in SharePoint",
Value = $"{SPUrl}?postId={DraftId}&sourceId={DraftId}"
});
}
return card.ToAttachment();
}
Please disregard the black lines I've added. But below you can see where the image is cropping off.
Image of the cropping.
Moving comment to answer -
We are using the below JSON and we get the perfect image without cropping -- { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "card image test" }, { "type": "Container", "items": [ { "title": "Public test 1", "type": "Image", "url": "https://i.imgur.com/OiJNN03.jpeg" } ] } ], "$schema": "adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }
I want to create the outlook calendar event with custom value. Because i need to get some value while open the event.
Is this possible to send the custom value while creating the event in outlook add in - calendar event.
const msalConfig = {
auth: {
clientId: CLIENT_ID, // Client Id of the registered application
redirectUri: REDIRECT_URL,
},
};
const graphScopes = ["user.read", "mail.send", "openid", "profile"]; // An array of graph scopes
const msalApplication = new UserAgentApplication(msalConfig);
const options = new MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new ImplicitMSALAuthenticationProvider(
msalApplication,
options
);
const option = {
authProvider, // An instance created from previous step
};
const client = Client.initWithMiddleware(option);
Example Event :
let event = {
"subject": "Let's go for lunch",
"body": {
"contentType": "HTML",
"content": "Does mid month work for you?"
},
"start": {
"dateTime": "2021-08-13T12:00:00",
"timeZone": "Pacific Standard Time"
},
"end": {
"dateTime": "2021-08-13T14:00:00",
"timeZone": "Pacific Standard Time"
},
"location":{
"displayName":"Harry's Bar"
},
"attendees": [
{
"emailAddress": {
"address":"adelev#contoso.onmicrosoft.com",
"name": "Adele Vance"
},
"type": "required"
}
]
};
client.api("/me/events").post(event, (err, res) => {
this.setState({ isLoading: false });
});
I want to pass the custom value while create the event. Is this possible to create the event with custom value.
You can use the Microsoft Graph API to create a Calendar event from custom data.
I'm developing a chrome extension that initiates a 3 seconds countdown using notifications. It works by creating an initial notification "recording in 3 seconds" and then updating that notification every second:
background-script.js
const waitForMs = (ms) => new Promise(r => setTimeout(r, ms))
const displayNotification = (message, updateNotificationId = undefined, expireInMs = undefined) => new Promise(
(resolve) => {
const notificationOptions = {
type: 'basic',
iconUrl: 'icon.png', // required
title: message,
message,
// Avoids sounds and vibrations
silent: true,
// Required to have notification update in real-time
requireInteraction: true
}
// Resolves with given notification id, possibly after clearing after timeout
const resolveWithId = async (id) => {
if (typeof expireInMs === 'number') {
await waitForMs(expireInMs)
chrome.notifications.clear(id)
}
resolve(id)
}
// Update if notification id is defined
// Otherwise create a new notification
if (typeof updateNotificationId === 'string') {
chrome.notifications.update(
updateNotificationId,
notificationOptions,
(updated) => {
console.log(`updated? ${updated}`)
resolveWithId(updateNotificationId)
}
)
}
else {
chrome.notifications.create(
notificationOptions,
(id) => resolveWithId(id)
)
}
}
)
chrome.browserAction.onClicked.addListener(() => {
chrome.notifications.getPermissionLevel(async (permissionLevel) => {
console.log(`permissionLevel: ${permissionLevel}`)
if (permissionLevel === 'granted') {
const notificationId = await displayNotification('Recording in 3...')
await waitForMs(1000)
await displayNotification('Recording in 2...', notificationId)
await waitForMs(1000)
await displayNotification('Recording in 1...', notificationId)
await waitForMs(1000)
await displayNotification('Now recording!', notificationId, 3000)
}
})
})
manifest.json:
{
"name": "NotificationExample",
"short_name": "NotificationExample",
"version": "1.0.0",
"manifest_version": 2,
"description": "",
"background": {
"scripts": [
"background-script.js"
],
"persistent": false
},
"browser_action": {
"default_title": "Notification Countdown Example"
},
"permissions": [
"notifications"
]
}
However, as you can see in this screen recording, on Windows 10 the notification is only updated successfully once (from 3 seconds to 2 seconds), and does not update the 3rd or 4th time. On MacOS it does work. Why does this not work on Windows 10 and how could this be resolved?
I'm developing an ionic 3 application like instagram, to let users pick photos from their phone album, while they can preview the photo on the same page.
I've tried cordova-plugin-photo-library here, but there's no limit function so I have to get all photos from user album, which could be very large volume. Users have to wait until all photos are loaded before they can click and select one picture. This is really bad user experience.
Anyone has an idea? Thanks.
you can use base64 image
# view
<img *ngFor='let image of images' [src]="DomSanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,'+image)" style="width: 100px;height:100px;" [hidden]="lastImage === null">
# choice select method
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'choice select method',
buttons: [
{
text: 'gallery',
handler: () => {
this.takePicture(this.camera.PictureSourceType.SAVEDPHOTOALBUM);
}
},
{
text: 'take image',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType) {
// Create options for the Camera Dialog
var options = {
quality: 100,
sourceType: sourceType,
encodingType: this.camera.EncodingType.JPEG,
allowEdit: true,
saveToPhotoAlbum: true,
targetWidth: 600,
targetHeight: 600,
correctOrientation: true,
destinationType: this.camera.DestinationType.DATA_URL
};
// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.SAVEDPHOTOALBUM) {
this.images.push(imagePath);
} else {
this.images.push(imagePath);
}
}, (err) => {
this.presentToast('Error while selecting image.');
});
}