cs smart ui sdk start.page.view

Ugis

Hello,

I'm trying to build my own page (outside of CS) that would display smart UI landing page or CWS landing page or basically any other folder landing page with all the widgets that are configured for that particular location. And modify the page so that all headers, search, etc. are removed - basically only widgets are displayed.
I thought that it would be possible to use csui/pages/start/start.page.view for this purpose but i don't understand how and if it is possible to pass any parameters to this view so that it would know which page to display.
Could it be that this view is using URL path to reflect what to show? e.g, if it is /app then show main landing, if it is /app/nodes/12345, show landing page for 12345, etc. If so, are there any way to provide these details to view programmatically as parameters or something?

Or maybe it is not possible / completely different approach must be applied?

Thanks,

Ugis

Ferdinand Prantl

Your approach is the right one. There are no examples if such pages, but you can learn how to write one by reading sources of the StartPageView. You will create:

• PerspectiveContext to maintain the widget data and drive the navigation among perspectives.
• PerspectivePanelView to host the perspectives with widgets.
• PerspectiveRouting (optionally, but likely) to synchronise the perspective location and the state of the widgets with the window location.

For example:

<link href="https://cshost/img/csui/themes/carbonfiber/theme.css" rel="stylesheet">
<script src="https://cshost/otcs/cs/widgets?crossOrigin=true&version=2"></script>

<style>
  body { margin: 0 }
  #perspective { height: 100vh }
</style>

<div class="binf-widgets" id="perspective"></div>

<script>
  csui.require.config({
    config: {
      // Choose the language if the browser preferences should be ignored.
      i18n: {
        locale: 'de',
        loadableLocales: { root: true, de: true }
      },
      // Avoid the automatic ticket refresh that does not work on integration pages.
      'csui/utils/authenticators/core.authenticators': {
        enableRedirectingFormAuthenticator: false
      },
      // Show a Back button on the container toolbar of the nodestable widget.
      'csui/integration/folderbrowser/commands/go.to.node.history': {
        enabled: true
      }
    }
  });

  csui.onReady3({
    connection: {
      url: 'https://cshost/otcs/cs/api/v1',
      supportPath: '/img',
      // Generated in OScript with $CSUI.Utils.GetOITCSTicket().
      session: { ticket: '<%= data.ticket %>' }
    }
  }, [
    'csui-options', 'csui/lib/marionette',
    'csui/utils/contexts/perspective/perspective.context',
    'csui/controls/perspective.panel/perspective.panel.view',
    'csui/pages/start/perspective.routing'
  ], function (csuiOptions, Marionette, 
      PerspectiveContext, PerspectivePanelView, PerspectiveRouting) {
    'use strict';

    // Create a new context with an authenticated connector.
    var context = new PerspectiveContext({
      factories: {
        connector: { connection: csuiOptions.connection }
      }
    });

    // Enable routing with hash-based routes.
    var routing = PerspectiveRouting.getInstance({ context: context });
    routing.start();

    // Create a perspective-hosting control.
    var view = new PerspectivePanelView({ context: context });
    var region = new Marionette.Region({ el: '#perspective' });
    region.show(view);

    // Navigate to a specific node.
    var nextNode = context.getModel('nextNode');
    nextNode.set('id', 38842);

    // Navigate to the landing page.
    // var applicationScope = context.getModel('applicationScope');
    // applicationScope.set('id', '');
  });
</script>