Add the Search gadget in your application to search for and then display the contents of a selected article from the search results. The Search gadget supports searching on tags and filtering by categories.

Adding the Search gadget in your application

You can add the Search gadget anywhere in your application by adding the KMArticleSearchGadget section in the section where you want the gadget to appear. 

1. Open the section in which you want the gadget to appear, for example, pyCaseMainInner.
2. In the target section, add the KMArticleSearchGadget section.
3. Make the section editable:
   When the section is editable, users can enter text in the text boxes and select from the drop-down lists in the gadget. 

             a. Hover over the section, and then click the Edit icon.
             b. In the Cell Properties window, click the Presentation tab.
             c. In the Edit option list, select Editable.           ​​​

Example: Add the KMArticleSearchGadget section in the pyCaseMainInner section. 

Optional: Opening the article in a separate window

By default, when you click an article from the search results list, the article opens on the right side of the Search gadget. You can configure the gadget to open the article in a separate window.

1. Open the KMArticleSearchGadget section.
2. In the table in the lower left under the Dynamic Layout section, click the ArticleTitle link.
3. In the Cell Properties window, click the Actions tab.

The OpenArticleInGadget activity creates the ArticleGadgetPage page by using the clicked articles in pzInsKey. You can use the ArticleGadgetPage as a context page and launch a harness with the ContentViewInArticleGadget section embedded.

Applying custom styles to the Search gadget

You can add custom styles using the CSS class in the style sheet to achieve the intended effect. The process is similar to the process for adding custom styles to other user interface elements. To apply custom styles to the Search gadget, add a style sheet to the skin of the application. 

1. In the header of Dev Studio, click Application > Skin.
2. On the Included styles tab, click Additional style sheets.
3. Add your custom style sheet by clicking Add style sheet.

Example:  Add a CSS class to the label in KMArticleGadgetTag. 

Example: At run time, the results of a search and the contents of the selected article on the right side of the pane.