You can add Public Access components such as the search panel or document results list to an existing web page using HTML tags, allowing for greater customization.
To add Public Access components to an existing web page:
-
In the head tag of the page's HTML, add the following jQuery dependencies:
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
-
In the body tag, add tags for the desired Public Access components:
Component
HTML Tag
Search Panel
<obpa-search-panel></obpa-search-panel>
Full-Text Search Panel
<obpa-fulltext-search-panel></obpa-fulltext-search-panel>
Document Hit List
<obpa-document-hitlist></obpa-document-hitlist>
Language Drop-Down
<obpa-language-selector></obpa-language-selector>
Document Viewer
<obpa-doc-view></obpa-doc-view>
Note:You cannot use a self-closing tag such as <obpa-doc-view />. Doing so will break the application.
-
After the component tags, at the bottom of the page, add this tag for the application bootstrapper:
<script src="app/app.js"></script>
- Replace CSS and images as desired, and style the rest of page around your needs. Public Access components use Bootstrap CSS classes, so they will adjust to match other Bootstrap themes.
- Copy the _obpa folder from the PublicAccessServer files to an appropriate location in the web site folder structure.
- Copy the obpa-config.json file from the !samples\sample-cq folder in the PublicAccessServer files to an appropriate location in the web site folder structure.
The following is a sample web page with Public Access components added:
