Tags:

TDS event presentation DXA 2.2 NET + Dynamic Documentation Module + SDL Tridion Docs 14 + DXD 11.1

Velmurugan Arjunan

Tridion Developer Summit has been held at Meervaart Theater Nov 4th and 5th, I also had the opportunity to present and speak in the event,  about DXA 2.2 NET + Dynamic Documentation Module + SDL Tridion Docs 14 + DXD 11.1 and followed by Demo.

The presentation can be downlod it from here.

DXA 22 NET + Dynamic Documentation Module + SDL Tridion Docs 14 + UDP 111 from TDS on Vimeo.

Introduction to Dynamic Documentation Module

DXA Dynamic Documentation module enables you to retrieve structured content (in the DITA standard) stored in an SDL Tridion Docs database and present it through your DXA web application.

The Dynamic Documentation module includes a Dynamic Documentation web application, or more briefly the Dynamic Documentation, which provides users with a responsive interface for viewing, navigating, and interacting with content published from SDL Tridion Docs.

Benefits

  • Single-page web application designed as a documentation portal
  • Modern, graphical user interface design
  • Responsive design for mobile support
  • Highly extensible and customizable
  • Includes search and commenting capabilities

DXA Dynamic Documentation prerequisites

  • Tridion Docs 14
  • DXD 11.0 Supported
  • DXD 11.1 Prefered
    • Discovery Service
    • Deployer Service
    • Content Service
    • IQ Index Service
    • IQ Query Service or IQ Combined service
  • DXA .NET websites
    • Microsoft .NET Framework 4.6.2
    • IIS or IIS Express with ASP .NET module
  • GUI Building
    • NodeJs v6.x or higher (64bit)
    • Webpack
    • Gulp
  • Front End
    • JavaScript (ES6)
    • TypeScript
    • React
    • Redux
    • HTML
    • LESS
    • CSS

DXA DD Module Installation / configuration

  1. Download the following OOTB sources and modules from github:
    https://github.com/sdl/dxa-web-application-dotnet/tree/release/2.2
    https://github.com/sdl/dxa-modules/tree/release/2.2
    https://github.com/sdl/dxa-modules/releases/download/DXA_2.2.2_Hotfix/SDL.DXA.DynamicDocumentation.Module.2.2.2.zip
  2. Extract both sources zip and Go to dxa-modules-release-2.2\webapp-net this folder and copy DynamicDocumentation and Search folder modules and also DxaModulesCommon.Props file
  3. Go to dxa-web-application-dotnet-release-2.2 folder and paste those folders and DxaModulesCommon.Props file here
  4. Open the DxaFramework.sln and click ok to ignore the unsupported Sdl.Web.Documentation project errror message
  5. Right click DxaFramework solution to add the following existing projects
    • DynamicDocumentation\Sdl.Web.Modules.DynamicDocumentation.csproj
    • Search\Sdl.Web.Modules.Search.csproj
    • Search\SI4T.Query.CloudSearch\SI4T.Query.CloudSearch.csproj
  6. Go to Sdl.Web.Site project references and then right click and add reference and then click left side Projects and select the following projects
    • Sdl.Web.Modules.DynamicDocumentation
    • Sdl.Web.Modules.Search
    • SI4T.Query.CloudSearch
  7. Right click Sdl.Web.Modules.DynamicDocumentation project and build
  8. Once succesfull build - expand the Sdl.Web.Modules.DynamicDocumentation project and copy the Areas folder and go to Sdl.Web.Site project paste it in the root folder.
  9. Right click Sdl.Web.Modules.Search project and build
  10. Once succesfull build - expand the Sdl.Web.Modules.Search project and copy the Areas folder and go to Sdl.Web.Site project paste it in the root folder.
  11. Go to SDL.Web.Site and open web.config update the following configs sections 
    In the modelBuilderPipeline section, add the Dynamic Documentation model builder to the pipeline, placing it first in the list and before the Default model builder.
<add type="Sdl.Web.Modules.DynamicDocumentation.Mapping.ModelBuilder, Sdl.Web.Modules.DynamicDocumentation" />

In the appSettings section Update the Web.config to change the default module to DynamicDocumentation 
<add key="default-module" value="DynamicDocumentation" /> 
Also update the following configs to as per your cusotomer environment.

<add key="discovery-service-uri" value="http://staging.dev.dxa.sdldev.net:8082/discovery.svc"/> 
<add key="oauth-client-secret" value="xxxx" />
  12. Update to Add the following Unity Declaration settings in Unity.config 
    <assembly name="Sdl.Web.Modules.DynamicDocumentation" />
<namespace name="Sdl.Web.Modules.DynamicDocumentation.Localization" />
<namespace name="Sdl.Web.Modules.DynamicDocumentation.Providers" />
<namespace name="Sdl.Web.Modules.DynamicDocumentation.Navigation" />
  13. Update the existing INavigationProvider type to Set Unity Type Mapping to DynamicNavigationProvider 
    <type type="INavigationProvider" mapTo="DynamicNavigationProvider">
   <lifetime type="singleton" />
</type>
  14. Update Unity.config for IContextClaimsProvider to AdfContextClaimsProvider instead of ContextServiceClaimsProvider 
    <type type="IContextClaimsProvider" mapTo="AdfContextClaimsProvider">
   <lifetime type="singleton" />
</type>
  15. Go to Site project root folder and create this folder path \system\assets\gui New-Item -Path ".\system\assets\gui" -ItemType Directory | Out-Null Copy the gui folder from DDMoudle\web\ to your project and go to gui root folder and run this below commands npm install -registry https://nexus.sdl.com/content/groups/npm/ npm run-script buildCopy the dist\assets folder to \system\assets\gui in websiteCopy cd_ambient_conf.xml config to keep in the website bin\config folder (File can be copied from SDL Tridion Sites Installation Media \Content Delivery\roles\api\rest\dotnet\config\cd_ambient_conf.xml)

Installing the Search module in the web application

  1. Open Unity.config to update to add the following config sections
  2. Add UnityDeclaration:
<assembly name="Sdl.Web.Modules.Search" /> 
<namespace name="Sdl.Web.Modules.Search.Providers" />

Set UnityTypeMapping:
<type type="ISearchProvider" mapTo="IQSearchProvider" />

Update web.config to add elastic index name
<add key="iq-search-index" value="udp-index" />

Dynamic Documentation GUI Building In order to build make sure you have Node.js installed (v6 or higher). Installing the necessary packages

npm install gulp-cli -g
npm install

Gulp tasks

# Build (debug)
gulp build
# Build everything and setup a server (debug)
gulp serve
# Build everything and setup a server (release)
gulp serve:dist
# Build (release)
gulp

Note: For a DXA for Dynamic Documentation implementation, you must install at least the Dynamic Documentation module. All other modules are optional.

I hope it helps if you have any questions regarding post your question in Tridion StackExchange.