Add Hyperlink in Chat BOT's Answer - using QnA Maker

Hey Developers, 

Hope you all doing well..

This is one of the important trick, which is very much essential for all the bot developers mainly who uses MS bot framework and  MS cognitive services 

Among them, QnAMaker is the popular cognitive service which we use to run our chatbot

Issue:

However, we can add Question and Answer in our knowledge base, we couldn't add any Hyperlinks easily in the answers, so here is my solution

Solution

While adding the answers in the QnA Maker, add the hyperlink in such a way

[********Text to Display*************](https://*************Your URL********)

Add your text to display inside a square brackets, and followed by URL inside a Open brackets.

Note: While pasting the URL, make sure its not hyperlinked by its own,
paste it in a Notepad first before pasting in QnA Maker.

Click on checkbox's label text to check the checkbox

Hi Developers ..!

Hope you're well.

You all might faced this small issue, when we want to check the check box which is so small in the Web-Page, and you need to focus on the check box.

All we need is to directly click on the label or text next to the check box, because we are reading the respective meaning of the check box and understanding it and we don't want to go back to check the check box,

So I've a simple solution with which we can directly click on the description of the check box to make the check box checked.


Example: 

The most used check box is "Don't Show this Again." and here too the size of the actual check box is too small.

<input type="checkbox" id="ClickMe" >Don't show this again!

Solution

There is a  HTML5 attribute "for" which helps us to click the checkbox

Source Code

<input type="checkbox" id="ClickMe" > <label for="ClickMe">Don't show this again!</label>

I want to make the Files to get Downloaded instead of Opening in a New Window in the Browser

Hey Everyone..!

Hope you all doing well.

Many Developers would have came across this small issue while developing a site, where you will get requirements from business that they don't want their PDF to be open in a new window as they takes time if their sizes are more than 10MB, so they will ask you to make the document to get downloaded automatically instead of opening in a new window. 


So I've a simple solution for it.


Example: 

I've a table with many rows, containing hyperlink data, which opens in a new window on clicking, but i want them to get downloaded automatically 

<a href="https://aaaaaaaaaaaaaaaaaaaaaaaa/My Document.pdf" target="_blank">My Document</a>

Solution

There is a  HTML5 attribute "download". with which we can easily download all the files

Source Code

<a href="https://aaaaaaaaaaaaaaaaaaaaaaaa/My Document.pdf" download="My Document">My Document</a>

How to download the PDF files instead of opening directly in your browser

Please follow the steps in your chrome browser to download the PDF files instead of opening directly in your browser.

• On your computer, open Chrome.
• At the top right, click More àSettings.

• At the bottom, click Advanced.
• Under "Privacy and security," click Site settings.
• Near the bottom, click PDF documents.
• Turn ON Download PDF files instead of automatically opening them in Chrome.

SharePoint Framework (SPFx) - Step by Step

Fundamental Building blocks of SharePoint Framework

The following are the important software required for creating SPFx

1. Node JS ( to write node based project)
2. npm package ( these are the pre-written library for node based project )
3. Webpack ( to bundle the code and move to production)
4. Yeoman (a Code generation tool :- used to generate project structure, - find new template)
5. Gulp JS ( Task runner - web server )

Create your first SharePoint Framework WebPart

Step 1 : Install Node JS from https://nodejs.org 
Step 2 : Install npm Package from  https://www.npmjs.com/
              cmd: npm install -g npm ( - g : installing globally )

Now we can start creating node projects which is npm based
Lets Install Yeoman a code template generator tool

Step 3 : cmd: npm install -g yo  https://yeoman.io/

Then we need to install Gulp JS https://gulpjs.com/

Step 4 : cmd: npm install -g gulp

Lets create our new project - SPFx Webpart

Step 5 : cmd: md helloworld webpart
             cmd: cd helloworld webpart

Step 6 : cmd: yo @microsoft/sharepoint
Step 7 : cmd: gulp serve

Now, you can able to view the webpart in a browser, displaying from a localhost server 

Step 8 : To Edit the webpart, open the project folder in Visual Code, and inside the folder "src", there will be a typescript file created, like "helloworldwebpart.ts", which we need to edit as per our requirement. 

To deploy the webpart in production, we need to create a package and push it in the app catalog of the destination production site.

Lets create the package file 

Step 9 : cmd: gulp package-solution -ship

Now, the package file "helloworld-webpart.sppkg" has been created inside the solution folder, under the sharepoint folder inside our project folder.

Step 10 : Open your SharePoint site in a browser and go to the app catalogs page, https://sitename.com/site/appcat

Lets upload or drag & drop our sppkg file in this document library. 

Step 11 : Lets Open the site or subsite where you want to add our new webpart, click on "Add an App", now you will be able to find our webpart in the list.

Step 11 : Lets Open the site or subsite where you want to add our new webpart, click on "Add an App", now you will be able to find our webpart in the list.
Step 12 : Go to the page where you want to display your webpart, and click on insert webpart, under the underdevelopment category, you can find our helloworld webpart. which you can save and it will work.

Note: Update the "write-manifest.json" , with the CDN (Content delivery network )URL, where you want host your code

Overview of Office 365

Office 365

Microsoft Office 365 (often called Microsoft 365 or Office 365) is an Online version of Microsoft's Office Applications., with which we can access all Microsoft Office Applications anytime anywhere.

Quick note: Many options which are available in the desktop version of a application are not available in the online versions

How to Access O365

è Log in to: https://portal.office.com/

è Enter your Microsoft account credentials, you can also use your office /school account, if they are a subscriber of O365

Office 365 Products/Apps/Applications

1.    Calendar   

2.    Delve

3.    Dynamics 365

4.    Excel

5.    Flow

6.    Forms

7.    OneDrive

8.    OneNote

9.    Outlook

10. People

11. Planner

12. Power BI

13. PowerApps

14. PowerPoint

15. SharePoint

16. StaffHub

17. Stream

18. Sway

19. Tasks

20. Teams

21. To-Do

22. Video

23. Word

24. Yammer

-To be Continued...

Know About SharePoint Online

SharePoint

In 2001, Microsoft Launched SharePoint, which is mainly focused for Document storage and Maintenance system.

Most people used to say that SharePoint is Microsoft Application like a word, excel or PowerPoint, which is not true.

SharePoint is collaboration platform, it can be hosted in server or in online.

We can access SharePoint through any popular browsers like Edge, IE, Chrome, Opera, etc.

SharePoint now evolved as SharePoint Online, and keep evolving.

SharePoint Online

SharePoint Online is a cloud-based service that helps organizations share and collaborate with colleagues, partners, and customers.

For a O365 subscriber, Microsoft hosted SharePoint in cloud which can be accessed in any browser anywhere.

Now SharePoint Online can be widely used to store any type of contents like word, Excel PDF, docs, image, video, etc.

Quick note: SharePoint Online collaborates extremely well with Microsoft applications

SharePoint Online as collaborative platform, it allows you to share information across the organization thorough pages, blogs, wiki pages, and other web contents so it’s more like website.

SharePoint Online also having work process, it includes

ü  Data Management

ü  Custom Forms

ü  Workflows

ü  SharePoint Online Search

As all these are hosted in SharePoint Online, we can search them easily. it provides an Endless search.

 -To be Continued..