Get rid with horizontal margin or spaces from Modern Community Site Pages

SharePoint Online Modern communication site pages support section layout, named Full-Width column. It helps to span the section without any horizontal margin or padding.

In this article, you will learn the following,

1. Add Full-width Section.
2. Add Full-width support to SPFx Control.
3. Add SPFx Control to Full-width Section.

Users can choose from a number of different section layouts such as,

• one columns 
• two columns
• three columns
• one-third left column
• one-third right column

Full-Width Section Requirement

When we build a regular SPFx control, it doesn’t expand beyond a certain width due to section layouts which don’t support or allow the full width.

So, let’s get started

Step 1 - Add Full-Width Section

• Full-width section allows layouts to expand to the full width of the page.
• Edit the page
• Click the plus “+” icon parallel to the section layout and select the Full-width section.

Step 2 - Add Full-Width support to SPFx Control

SPFx control doesn’t add the full-width column property by default. But SharePoint Framework allows us to add full-width column attributes into the web part manifest file, i.e., GetEmployeeDataWebPart.menifest.json and adds supportsFullBleed property to true.

1. {  
2.   "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",  
3.   "id": "c58ad54b-0b32-4087-8b9b-5b28ded5e375",  
4.   "alias": "GetEmployeeDataWebPart",  
5.   "componentType": "WebPart",  
6.   
7.   // The "*" signifies that the version should be taken from the package.json  
8.   "version": "*",  
9.   "manifestVersion": 2,  
10.   
11.   // If true, the component can only be installed on sites where Custom Script is allowed.  
12.   // Components that allow authors to embed arbitrary script code should set this to true.  
13.   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  
14.   "requiresCustomScript": false,  
15.   "supportsFullBleed": true,  
16.   
17.   "preconfiguredEntries": [{  
18.     "groupId": "5c03119e-3074-46fd-976b-c60198311f70",   
19.     "group": { "default": "Other" },  
20.     "title": { "default": "GetEmployeeData" },  
21.     "description": { "default": "GetEmployeeData description" },  
22.     "officeFabricIconFontName": "Page",  
23.     "properties": {  
24.       "listName": "SPFxList"  
25.     }  
26.   }]  
27. }  

Do the above one line setting. Build the bundle and deploy the solution.

Step 3 - Add SPFx Control to Full Width Section 

Browse the site and add a full-width section. The custom SPFx control will be available as per the below screenshot.

Click and add control. You can see that the custom control will take the full horizontal section and doesn’t allow margin or spaces.

NoteAs per today, the full-width column section doesn’t work with workbench and Modern Team Sites.

I hope you have enjoyed and learned something new in this article. Thanks for reading. Stay tuned for the next article.

Rich Card with Bot Framework SDK V4

Messages exchanged between a user and a bot can contain media such as images, video, etc. The Bot Framework SDK supports the task of sending rich messages to the user.

In this tutorial, you will learn the following.

1. Design Hero Card and Response with Images.
2. Design the Video Card and Response with Video.
3. Build and Publish the Solution.
4. Test your bot with Web Chat Client.

Below are the prerequisites.

1. The bot created in the previous article to help you understand the simple QnA Maker Bot
2. Response card can be designed with different media response, i.e., Image & Video

Let's understand the architecture flow with respect to this article.

Primary bot communicates with the user through message activities.

To send a simple text message, use turn context object SendActivityAsync method to send a single message response. You can use SendActivitiesAsync method to send multiple messages. 

1. await turnContext.SendActivityAsync($"Welcome!");  

To receive a simple text message, use text property of activity object. 

1. var responseMessage = turnContext.Activity.Text;  

Some message activities consist of simple text and others may consist of richer context such as Cards, i.e., Hero Card, Video Card etc. Let’s start designing the cards.

Step 1 - Design Hero Card and Response with Images

Hero card allows you to combine images and buttons in one object, and send them to the user.

To process with rich card i.e. Hero Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Buttons	Button with the click event,  clicking allows the user to navigate

1. public static HeroCard GetHeroCard()  
2. {  
3.     var heroCard = new HeroCard  
4.     {  
5.         Title = "<<Title>>",  
6.         Subtitle = "<<SubTitle>>",  
7.         Text = "<<Secription>>",  
8.         Images = new List<CardImage> { new CardImage("<<Image Path>>") },  
9.         Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "<<Re-direct Url>>") },  
10.     };  
11.     return heroCard;  
12. }  

QnAMaker Hero Card Response Design

Set Response design with Hero Card values.

Step 2 - Design Video Card and Response with Video

Video Card allow you to play video. Typically it's used to open a URL and stream an available video.

To process with rich card i.e. Video Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Media	URL, i.e., video URL to stream any available video
Buttons	Button with the click event, Onclick allows the user to navigate

1. public static VideoCard GetVideoCard(string[] qnaAnswerData)  
2.         {  
3.             var videoCard = new VideoCard  
4.             {  
5.                 Title = <<”Title”>>,  
6.                 Subtitle = <<”Title”>>,  
7.   
8.                 Text = <<”Title”>>,  
9.                 Image = new ThumbnailUrl  
10.                 {  
11.                     Url = <<”Title”>>,  
12.                 },  
13.                 Media = new List<MediaUrl>  
14.                 {  
15.                     new MediaUrl()  
16.                     {  
17.                         Url = <<”Title”>>,  
18.                     },  
19.                 },  
20.                 Buttons = new List<CardAction>  
21.                 {  
22.                     new CardAction()  
23.                     {  
24.                         Title = "Learn More",  
25.                         Type = ActionTypes.OpenUrl,  
26.                         Value =  <<”Title”>>,  
27.   
28.                     },  
29.                 },  
30.             };  
31.   
32.             return videoCard;  
33.         }  

QnaMaker Video Card Response Design.

Set Response design with Video Card values.

Step 3 - Build and Publish the Solution

Navigate to EchoBot.cs file and add a condition for Hero Card and Video Card response and design.

Replace the AccessQnAMaker code with the below section. It checks the response parameter and design card. If the response has 5 parameters, it calls the Hero Card method. If the response has 6 parameters, it calls Video Card method else replies with simple text. 

1. private async Task AccessQnAMaker(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
2.         {  
3.             var results = await EchoBotQnA.GetAnswersAsync(turnContext);  
4.             string[] qnaAnswerData = results[0].Answer.Split(';');  
5.             int dataSize = qnaAnswerData.Length;  
6.             if (results.Any())  
7.             {  
8.                 var attachments = new List<Attachment>();  
9.                 // Reply to the activity we received with an activity.  
10.                 var reply = MessageFactory.Attachment(attachments);  
11.                 //image card have 5 paramters  
12.                 if (dataSize == 5)  
13.                 {  
14.                     reply.Attachments.Add(Cards.GetHeroCard(qnaAnswerData).ToAttachment());  
15.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
16.                 }  
17.                 //video card have 6 parameter  
18.                 else if (dataSize == 6)  
19.                 {  
20.                     reply.Attachments.Add(Cards.GetVideoCard(qnaAnswerData).ToAttachment());  
21.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
22.                 }  
23.                 else  
24.                 {  
25.                     await turnContext.SendActivityAsync(MessageFactory.Text(results.First().Answer), cancellationToken);  
26.                 }  
27.             }  
28.             else  
29.             {  
30.                 await turnContext.SendActivityAsync(MessageFactory.Text("Sorry, could not find an answer in the Q and A system."), cancellationToken);  
31.             }  
32.         }  

Right-click the solution. Select "Build and publish the solution"with the help of published profile.

Step 4 - Test your bot with Web Chat Client

Navigate to Azure WebApp Bot and select Test in WebChat client.

The previous article can be found from these links.

• Learn and Build Azure Bot With Bot Framework SDK V4
• Build QnAMaker Azure Bot with Bot Framework SDK V4

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.