I am using MS document for Displaying Carousel of Images.
Code that I used:-
var heroCard1 = new HeroCard
{
Images = new List<CardImage> { new CardImage(Path.Combine(Environment.CurrentDirectory, #"Resources", "Step1.png")) },
};
var heroCard2 = new HeroCard
{
Images = new List<CardImage> { new CardImage(Path.Combine(Environment.CurrentDirectory, #"Resources", "Step1.png")) },
};
var attachments = new List<Attachment>();
var reply = MessageFactory.Attachment(attachments);
reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
reply.Attachments.Add(heroCard1.ToAttachment());
reply.Attachments.Add(heroCard2.ToAttachment());
await stepContext.Context.SendActivityAsync(reply);
I am not getting Carousel of Images. instead I am getting empty carousel.
But when i use herocards indivisually they work fine.
Please help me to find solution ? Thanks In advance
Here is the sample code for carousel images in BOT framework
bot.on('conversationUpdate', function (message) {
if (message.membersAdded) {
message.membersAdded.forEach((identity) => {
if (identity.id == message.address.bot.id && message.source != 'skypeforbusiness') {
console.log(message);
bot.send(new builder.Message()
.address(message.address)
.text('Choose your language :')
);
setTimeout(function () {
bot.send(new builder.Message()
.address(message.address)
.attachmentLayout(builder.AttachmentLayout.carousel)
.attachments([
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "English", "English")
]),
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "Français")
]),
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "Español", "Español")
])
])
);
}, 1000);
}
});
}
});
You refer the SO thread for information.
Related
I wrote the following code to disable the series animation :
Animation = new Animation{Enabled = false},
But after runing my application , the problem still persists.
My code to display the treemap is as follows:
#{ var chartOptions =
new Highcharts
{
Title = new Title
{
Text = ""
},
Credits = new Credits
{
Enabled = false
},
Series = new List<Series>
{
new TreemapSeries
{
Animation = new Animation{Enabled = false},
LayoutAlgorithm = TreemapSeriesLayoutAlgorithm.Squarified,
AlternateStartingDirection = true,
Levels = new List<TreemapSeriesLevels>
{
new TreemapSeriesLevels
{
Level = 1,
LayoutAlgorithm = TreemapSeriesLevelsLayoutAlgorithm.Squarified,
DataLabels = new TreemapSeriesDataLabels()
{
Enabled = true,
Align = TreemapSeriesDataLabelsAlign.Left,
VerticalAlign = TreemapSeriesDataLabelsVerticalAlign.Top
}
}
},
Data = #ViewBag.resultGreen
,
}
}
};
chartOptions.ID = "chart";
chartOptions.PlotOptions.Series.Animation.Enabled = false;
var renderer = new HighchartsRenderer(chartOptions);
}
#Html.Raw(renderer.RenderHtml())
How can i solve this problems?
I tried to solve this problem by the link below:
How to disable animations on Highcharts Dotnet C# MVC?
The provided answer in the mentioned thread looks to be related to DotNet.Highcharts. If you use the official Highcharts .NET wrapper use the AnimationBool option:
new TreemapSeries
{
AnimationBool = false,
...
}
API Reference:
https://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_treemap_series.html#a3b53a65560c6917e7ee52e1779335b2e
I am trying to display list of item on Echo show. Am using Alexa.Net.APL C# and below is what i have done so far but is not displaying i will appreciate help.
This is my method that generate Directive
private RenderDocumentDirective BuildDirective(string bg = "")
{
if (string.IsNullOrEmpty(bg))
{
bg = "https://i.ibb.co/5cWztFH/brown-on-seashore-near-mountain-1007657.jpg";
}
var mainLayout = new Layout(
new AlexaTextList
{
BackgroundImageSource = bg,
HeaderTitle = "Alexa text list header title",
HeaderSubtitle = "sub",
HeaderDivider = true,
BackgroundScale = new APLValue<Scale>(Scale.BestFill),
BackgroundAlign = new APLValue<string>("center"),
BackgroundColor = new APLValue<string>("transparent"),
ListItems = new APLValue<List<AlexaTextListItem>>()
{
Value = new List<AlexaTextListItem>
{
new AlexaTextListItem
{
PrimaryText = "Hello world! 1"
},
new AlexaTextListItem
{
PrimaryText = "Hello world! 2"
},
new AlexaTextListItem
{
PrimaryText = "Hello world! 3"
}
}
}
}
);
var renderDocument = new RenderDocumentDirective
{
Token = "randomToken",
Document = new APLDocument
{
MainTemplate = mainLayout
},
};
return renderDocument;
}
Here is where am calling it
var response = ResponseBuilder.Ask(d, rp, session);
var dr = BuildDirective();
response.Response.Directives.Add(dr);
return response;
This question is an extension of my previous question.
(How can I put "AdaptiveActionSet" in "AdaptiveColumn"?)
At the time, I didn't know much about the customization of adaptive cards and the WebChat.html file.
The image above is the layout of the adaptive card I want.
The Reserve button on the right is Action.OpenUrl button.
To place a button like that, I need to put an ActionSet in a Column. However, typical Adaptive Cards do not show ActionSet in Column as in the image above.
The content type is shown below.
ContentType = "application/vnd.microsoft.card.adaptive"
(In web chat)
To solve this, I have to customize Adaptive Cards, but I'm not sure how.
(Ashamed,
I referred to the link below but still I can't customize the card.
Bot Connector service is not using latest Adaptive Cards #87
Can you show me a way to solve this or show a simple customized card example? Please.
Below is the code I wrote.
My Adaptive Cards Code :
card.Body.Add(new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>()
{
new AdaptiveColumn()
{
//(~Date, No problem)
},
new AdaptiveColumn()
{
//(~Price, No problem)
},
new AdaptiveColumn()
{
Items =
{
new AdaptiveActionSet()
{
Actions =
{
new AdaptiveOpenUrlAction()
{
Url = new Uri("https://www.SomeUrl.com"),
Title = "Reserve",
Style = "positive",
}
}
}
},
Width = "auto",
}
},
});
var reply = turnContext.Activity.CreateReply();
reply.Attachments = new List<Attachment>
{
new Attachment()
{
ContentType = "application/vnd.microsoft.card.custom",
Content = card
}
};
My webChat.html :
const attachmentMiddleware = () => next => card => {
if (card.attachment.contentype === 'application/vnd.microsoft.card.custom'){
card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
}
return next(card)
};
window.WebChat.renderWebChat({
directLine: botConnection,
styleOptions,
adaptiveCardHostConfig,
attachmentMiddleware
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
As above, ContentType = "application/vnd.microsoft.card.custom"
If I assign custom to contentType,
I get an error called No renderer.
Using AdaptiveColumn's SelectAction solved the problem.
And it by using AdaptiveTextBlock and SelectAction together and specifying Width.
ex)
Items =
{
new AdaptiveTextBlock()
{
HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
Color = AdaptiveTextColor.Light,
Text = "Reserve",
Weight = AdaptiveTextWeight.Bolder,
}
},
SelectAction = new AdaptiveOpenUrlAction()
{
Url = new Uri($"{someurl}"),
Title = "rsv",
Id = "bb" + cnt,
},
Width = "50px"
I'm trying to use adaptive cards by adding it on my luis response, and was following a guide: https://learn.microsoft.com/en-us/bot-framework/dotnet/bot-builder-dotnet-add-rich-card-attachments.
How come my buttons is not showing up on my bot emulator? did i miss anything? see picture:
my code:
[LuisIntent("Test")]
public async Task Test(IDialogContext context, LuisResult result)
{
Activity replyToConversation = (Activity)context.MakeMessage();
//Activity replyToConversation = message.CreateReply("Should go to conversation");
replyToConversation.Attachments = new List<Attachment>();
AdaptiveCard card = new AdaptiveCard();
// Add text to the card.
card.Body.Add(new TextBlock()
{
Text = "Adaptive Card design session",
Size = TextSize.Large,
Weight = TextWeight.Bolder
});
// Add text to the card.
card.Body.Add(new TextBlock()
{
Text = "Conf Room 112/3377 (10)"
});
// Add text to the card.
card.Body.Add(new TextBlock()
{
Text = "12:30 PM - 1:30 PM"
});
// Add list of choices to the card.
card.Body.Add(new ChoiceSet()
{
Id = "snooze",
Style = ChoiceInputStyle.Compact,
Choices = new List<Choice>()
{
new Choice() { Title = "5 minutes", Value = "5", IsSelected = true },
new Choice() { Title = "15 minutes", Value = "15" },
new Choice() { Title = "30 minutes", Value = "30" }
}
});
// Add buttons to the card.
card.Actions.Add(new HttpAction()
{
Url = "http://foo.com",
Title = "Snooze"
});
card.Actions.Add(new HttpAction()
{
Url = "http://foo.com",
Title = "I'll be late"
});
card.Actions.Add(new HttpAction()
{
Url = "http://foo.com",
Title = "Dismiss"
});
// Create the attachment.
Attachment attachment = new Attachment()
{
ContentType = AdaptiveCard.ContentType,
Content = card
};
replyToConversation.Attachments.Add(attachment);
// var reply = await connector.Conversations.SendToConversationAsync(replyToConversation);
await context.PostAsync(replyToConversation);
context.Done(true);
}
Change your HttpAction to OpenUrlAction (or SubmitAction, depending on your needs) and you will get your buttons:
When you look at the documentation, Actions possibilities are:
Action.OpenUrl
Action.Submit
Action.ShowCard
Their equivalent in C# objects are OpenUrlAction, SubmitAction and ShowCardAction
Is it possible to create buttons on the view using only Elements API?
var root =
new RootElement ("LoginScreen"){
new Section ("Enter your credentials") {
new EntryElement ("Username", "Your user name", "user1"),
new EntryElement ("Password", "Your password", "", isPassword:true),
},
new Section () {
new RootElement ("Login"){
//Here should be a button
}
},
new Section () {
new BooleanElement ("Save your credentials", false),
},
};
var dv = new MainController (root, true){ Autorotate = true };
navigation.PushViewController (dv, true);
I know it's possible with Reflection API using OnTapAttribute, but I wonder how to do that with Elements API.
And when user taps on the button it should Push another view controller...
Oh I guess I can use StyledStringElement like that
new StyledStringElement ("Login", delegate{ DoLogin (); })