HTML Configuration for Existing Web Pages - Public Sector Constituency Web Access - Foundation 24.1 - Foundation 24.1 - Ready - OnBase - external

Public Sector Constituency Web Access
Platform
OnBase
Product
Public Sector Constituency Web Access
Release
Foundation 24.1
License

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:

  1. In the head tag of the page's HTML, add the following jQuery dependencies: 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
  2. 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.

  3. After the component tags, at the bottom of the page, add this tag for the application bootstrapper: 
    <script src="app/app.js"></script>
  4. 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.
  5. Copy the _obpa folder from the PublicAccessServer files to an appropriate location in the web site folder structure.
  6. 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:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!-- OBPA dependencies -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
        
        <!-- OBPA files -->
        <script src="obpa/obpa_dependencies.js"></script>
        <script src="obpa/obpa_app.js"></script>
        
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container" style="margin-top:10px;margin-bottom:10px;">
            <div>
                <obpa-language-selector></obpa-language-selector>
            </div>
            <hr />
            <div>
                <obpa-search-panel></obpa-search-panel>
                <!--<obpa-fulltext-search-panel></obpa-fulltext-search-panel>-->
            </div>
            <hr />
            <div>
                <obpa-document-hitlist></obpa-document-hitlist>
            </div>
        </div>
    </body>
</html>