Starting in Blackbaud CRM 4.0, the constituent summary on the Constituent page displays a series of interactive tiles. Each tile is a self-contained view data form that the summary dynamically loads, and end users can select which tiles to display. The summary displays several out-of-the-box tiles, and third-party developers can create their own custom tiles.
This code sample teaches you the basics of how to build a custom tile to display in the Constituent page summary. You can use the code sample to create a tile that displays demographics information in the constituent summary and allows end users to add and edit data through the tile.
The code sample demonstrates how to take advantage of some of the exciting features that are available for constituent tiles.
- Learn how to display features such as links within a tile. The sample code creates a UI action on the tile's view data form spec for links to more information on the Constituent page's Personal Info tab. Then the UI Model indicates where to display the UI actions.
- Learn how to display features such add and edit options within a tile. The sample code creates UI actions on the tile's view data form spec for editing demographics and personal information and for adding aliases. Then the UI Model indicates where to display the UI actions.
- Learn how to modify the appearance of a tile through the UI Model's HTML file. The sample code uses HTML and CSS to control the styling. You can also create JavaScript files in the UI Model for a custom tile, but this sample does not use any JavaScript.
Before you build the UI Model project, be sure to complete the following:
- You need a developer instance of Blackbaud CRM version 4.0 installed or higher. (4.0 is the most recent version at the time of writing this sample). You need the Blackbaud CRM SDK 4.0. If you have more than one version of the SDK, you need to run the SetCurrentSDK.bat file located in your local 4.0 version SDK folder. See our instructions to set up a developer environment for more details.
- In the Blackbaud.CustomFx.Demographics.UIModel project, update the build output location in Visual Studio to reflect your local environment.
- Right-click the Blackbaud.CustomFx.Demographics.UIModel project and select Properties. Then on the Compile tab, click Browse in the Build output path field and select the \bbappfx\vroot\bin\custom folder in your installation directory.
- Open the postbuild.bat file and update the xcopy path in the second line to reflect the \bbappfx\vroot\bin\htmlforms folder in your installation directory.
##Resources##
- See the Blackbaud CRM Read Me.
- Step by Step Instructions for creating a tiles
- Data Forms Chapter within Developer Guides
##Contributing##
Third-party contributions are how we keep the code samples great. We want to keep it as easy as possible to contribute changes that show others how to do cool things with Blackbaud SDKs and APIs. There are a few guidelines that we need contributors to follow.
For more information, see our canonical contributing guide in the Blackbaud CRM repo which provides detailed instructions, including signing the Contributor License Agreement.