Create a new local block package

Author:Kate
Last Updated:July 02, 2021 1:55 PM
  1. Install Client SDK
    • Use Blocks.[BlockName] naming convention
    • Include Blocks starter pack
  2. Install block package
    • Navigate to packages
    • Upload V7 blocks package from M drive
    • Test and install package
  3. Open solution
  4. Delete virtual NWS folder and replace it with actual folder
  5. Add new block editor item named as Blocks.[Namespace] to NWS folder
    • You may have to name it as [Namespace], then rename to include Blocks.
  6. Create a razor page for Display
    • [BlockName].cshtml
    • This will be edited later, after editing web config file
  7. Edit [BlockName].cs file
    • Edit Namespace to reflect path to UI Support
    • Add [BlockName]ViewModel class
    • Add view model reference to CmsComponentBase
    • Add ViewPath to display razor page
    • Edit InitializeCmsComponent method to include your block-specific settings
  8. Edit Editor.cs file
    • Edit Namespace to reflect path to UI Support
    • Ensure ViewPath points to Editor.cshtml
    • Add block-specific property to BlockEditorViewModel class
    • Set model property constraints in HydrateModel method
  9. Edit web.config
    • Include add namespace variable NWS.Titan.Blocks.BlockName.UISupport
  10. Edit Display.cshtml
    • Add using statement for BlockNameViewModel
    • Create display for Model property
  11. Edit Editor.cshtml
    • Add using statement for EditorViewModel
    • Create display for Model property editor
  12. Edit AddBlocks.sql
    • Show all files in database folder
    • Include AddBlocks.sql in project
    • Edit pathways and names to reflect your block information
  13. Run SQL import
    • Open Package Manager Console
    • Change directory to Deployment
    • Run Import-DatabaseObjects
  14. Test block in local workstation
    • Navigate to Titan admin, then blocks and confirm the presence of your block
    • Activate block
    • Navigate to Content
    • Add block and begin testing

Troubleshooting:

The most probable cause of issues in this process is inconsistent or otherwise incorrect pathway mapping. In order to verify that this is the source of the issue and begin troubleshooting:

  • Navigate to the block in Titan admin and verify the pathways listed here
  • Debug the solution by attaching to the current process
  • Drop a breakpoint in the HydrateModel method
    • An exception or error that occurs within this method indicates a problem with your code
    • An exception or error that occurs after method successfully executes indicates a problem with pathway mapping
top