Calling the upload file process from an external system

B"H

Hi,

I have a question regarding the smart UI Add document's Upload screen.

As you can see in the set of screenshots below, whenever I upload a document inside a specific folder, I get this file properties screen, after I choose the file to upload from my system.

How Can I get to this upload window from a localhost of an external system?

To make my question clearer:

I added a code snippet which resides in the file csui_overide_style_kit/pages/app.html:

csui.initialize(function() {

'use strict';

csui.authenticate(function() {

csui.require(['csui/pages/start/start.page.view', 'csui/lib/domReady!'

], function (StartPageView) {

var startPageView = new StartPageView();

startPageView.render();

});

this code will retrieve the home page from a far system with the help of a customized loader.js file

What is the equivalent set of commands to invoke the "file upload" operation as described in the images below?

Thanks

ShowFilwUploadDialog.docx

Find more posts tagged with

Comments

yaronlu

Hi,

I managed to bring the properties of a specified node, with the code snippet shown below.

Does anyone know how can I lavarage this code to give me "add file" functionality (with upload)?

Thanks,

Yaron

csui.initialize(function () {          'use strict';           csui.authenticate(function () {               csui.require(['csui/lib/backbone',                'csui/utils/contexts/page/page.context',                'csui/utils/contexts/factories/connector',                'csui/models/node/node.model', 'csui/utils/commands',                'csui/pages/start/start.page.view', 'csui/lib/domReady'                ], function (Backbone, PageContext, ConnectorModelFactory, NodeModel, commands,StartPageView) {                        var startPageView = new StartPageView();                                                 var context = new PageContext(),                                connector = context.getObject(ConnectorModelFactory),                                node = new NodeModel({                                    id: 6505,                                    actions: [                                        {signature: 'Properties'}                                    ]                                }, {connector: connector});                         node.fetch();                         var   nodeCollection = new Backbone.Collection([node]),                                properties = commands.get('Properties'),                                status = {                                    nodes: nodeCollection,                                    context: context                                };                          startPageView.render();                          if (properties && properties.enabled(status)) {                            properties.execute(status);                        }                    });           });         });

Ferdinand Prantl

If you want to just upload a file without UI, you can have a look at FileUploadHelper (csui/controls/fileupload/fileupload).

If you want to trigger the file uploading command, like it is done by the "Document" menu item below the "+" menu, you can do it like this:

  <body class="binf-widgets">    <button id="upload" type="button"            class="binf-btn binf-default" disabled>      Upload File    </button>    <div id="content"></div>  </body>

    csui.onReady2(['csui/lib/jquery', 'csui/lib/backbone',      'csui/lib/marionette', 'csui/utils/contexts/page/page.context',      'csui/utils/contexts/factories/connector',      'csui/models/node/node.model',      'csui/models/node/node.addable.type.collection',      'csui/controls/globalmessage/globalmessage',      'csui/dialogs/modal.alert/modal.alert',      'csui/utils/base', 'csui/utils/commands'    ], function ($, Backbone, Marionette, PageContext, ConnectorFactory,        NodeModel, NodeAddableTypeCollection, GlobalMessage, ModalAlert,        base, commands) {      'use strict';      var context = new PageContext(),          connector = context.getObject(ConnectorFactory),          // Where to upload the file          container = new NodeModel({            id: 2000          }, {            connector: connector          }),          // Check if the current user is allowed to create documents          addableTypes = new NodeAddableTypeCollection(undefined, {            node: container          }),          // Place success, failure and upload message panel          contentRegion = new Marionette.Region({            el: '#content'          });      $.when(container.fetch(), addableTypes.fetch())          .done(function () {            $('#upload').removeAttr('disabled');          })          .fail(function (request) {            var error = new base.Error(request);            ModalAlert.showError(error.message, 'Fetching the container failed');          });      $('#upload').click(function () {        var add = commands.get('Add'),            status = {              container: container,              data: {                addableTypes: addableTypes              },              context: context            };        if (add && add.enabled(status)) {          add.execute(status, {            addableType: 144,            addableTypeName: 'Document' // Fix a bug in csui          });        }      });      GlobalMessage.setMessageRegionView(contentRegion);    });

If you execute the code on a page with FolderBrowserWidget or StartPageView, you do not need to initialize the status message placeholder by GlobalMessage.

The dialog for entering metadata pops up only if you have enter mandatory attributes for the new document.

Shai_Abadi

Hi Ferdinand!

Sorry for not trying this earlier. We didn't get a notification that there is an answer on the forum.

We are trying this now.

Question: Is there a way to also pass paramaters / values to populate the category fields? to save time for the user in entering meta data manually.

Thanks again!!

Hoc_Huynh

Hi Shai,

Regarding your question:

“Is there a way to also pass paramaters / values to populate the category fields? to save time for the user in entering meta data manually.”

This is usually set up by users with higher process privileges who added the category to the server. In Classic UI under the Categories Volume in the Admin page, each category can have default values. Then when the category is being applied to the object (e.g. a document being added), the category form will have the default values populated.

If you would like to set the category values programmatically with the UI API from the SDK, you can make a request to our Product Manager. We would study your scenario, and if approved, development would try to provide a mechanism for your code to pass parameter values to the form data.

Hope that helps.

yaronlu

Hi Ferdinand, and thank for your answer.

I tried to implement the code you supplied, and had some problems:

1. "onReady2" event is not recognized - am I missing some js references?

2. the path: csui/models/node/node.model',
'csui/models/node/node.addable.type.collection'

does no exist in the folder structure of:

..\opentext\support\csui phisical path - is my folder structre need some update?

I appriciate your help!

Ferdinand Prantl

You need CS 16.0 or newer to be able to use csui.onReady2. My code sample works only in CS 16.0.3 or newer. (We released the extensibility first with CS 16.0.3.)

Model IDs, which appear like paths, are not opened as single files from the support/csui directory. The modules are loaded from bundles like csui-data or csui-forms.

Are you sure, that you connect to the right server?

Ferdinand Prantl

One possible problem: if you wrote a development page and you load Smart UI sources for debugging purposes, for example:

  <script src="../../lib/src/csui/lib/require.js"></script>  <script src="../../lib/src/csui/config.js"          data-csui-path="../../lib/src/csui/src"></script>

You will need to include also the global functions to get the csui.onReady2 defined:

  <script src="../../lib/src/csui/helpers.js"></script>

If you load the release version from a real server on your page, by:

  <script src=".../widgets?crossOrigin=true"></script>

then csui.onReady2 is always available.

yaronlu

Hi Ferdinand,

I still cant get the code to work.

It looks like I am missing some files.

Can you specify what the folder structure in which the HTML file resides - should be?

Right now I have only the two attached files, and it is working partially,

so I need to know what is the folder structure.

Thanks Again!

csui-loader.js

Ferdinand Prantl

You use csui-loader from csui-style-override-kit, but you do not wait, until it is loaded and authenticated. From your page:

  <script type="text/javascript" src="csui-loader.js"></script>  <script type="text/javascript">    // Load the modules    csui.onReady2(['csui/lib/jquery', 'csui/lib/backbone',      'csui/lib/marionette', 'csui/utils/contexts/page/page.context',      'csui/utils/contexts/factories/connector',      'csui/models/node/node.model',      'csui/models/node/node.addable.type.collection',      'csui/controls/globalmessage/globalmessage',      'csui/dialogs/modal.alert/modal.alert',      'csui/utils/base', 'csui/utils/commands'    ], function ($, Backbone, Marionette, PageContext, ConnectorFactory,        NodeModel, NodeAddableTypeCollection, GlobalMessage, ModalAlert,        base, commands) {      ...    });  </script>

Pages in csui-style-override-kit wait until csui is loaded by calling csui.initialize and until it is authenticated by calling csui.authenticate. If you do not hardcode the server connection oon your page, you can continue using csui-loader like this:

  <script type="text/javascript" src="csui-loader.js"></script>  <script type="text/javascript">    // Load csui using the csui-loader configuration    csui.initialize(function () {      // Authenticate using the csui-loader configuration      csui.authenticate(function () {        // Load the modules        csui.onReady2(['csui/lib/jquery', 'csui/lib/backbone',          'csui/lib/marionette', 'csui/utils/contexts/page/page.context',          'csui/utils/contexts/factories/connector',          'csui/models/node/node.model',          'csui/models/node/node.addable.type.collection',          'csui/controls/globalmessage/globalmessage',          'csui/dialogs/modal.alert/modal.alert',          'csui/utils/base', 'csui/utils/commands'        ], function ($, Backbone, Marionette, PageContext, ConnectorFactory,            NodeModel, NodeAddableTypeCollection, GlobalMessage, ModalAlert,            base, commands) {          ...        });      });    });  </script>

I found, that the module 'csui/models/node/node.addable.type.collection' was not exposed as public in CS 16.0.3. It has been corrected in CS 16.2. As a workaround, you can force it to load by other module, for example by 'csui/widgets/nodestable/nodestable.view':

  <script type="text/javascript" src="csui-loader.js"></script>  <script type="text/javascript">    // Load csui using the csui-loader configuration    csui.initialize(function () {      'use strict';      // Authenticate using the csui-loader configuration      csui.authenticate(function () {        // Load the nodestable widget as a workaround for a csui bug -        // csui/models/node/node.addable.type.collection is not published        csui.onReady2(['csui/widgets/nodestable/nodestable.view'        ], function () {          // Load the modules as usual          csui.require(['csui/lib/jquery', 'csui/lib/backbone',            'csui/lib/marionette', 'csui/utils/contexts/page/page.context',            'csui/utils/contexts/factories/connector',            'csui/models/node/node.model',            'csui/models/node/node.addable.type.collection',            'csui/controls/globalmessage/globalmessage',            'csui/dialogs/modal.alert/modal.alert',            'csui/utils/base', 'csui/utils/commands'          ], function ($, Backbone, Marionette, PageContext, ConnectorFactory,              NodeModel, NodeAddableTypeCollection, GlobalMessage, ModalAlert,              base, commands) {            ...          });        });      });    });  </script>

The rest of your code should work.

yaronlu

Now it's finally working!

Thanks Ferdinand for your Help.

It was educating :-)

Ugis

@Ferdinand Prantl thanks for the upload example. I used it in my custom WR where i'm showing multiple folders in single view and by click on this custom upload file gets uploaded to respective folder.

But I was wondering if it is possible to execute callback function after upload is completed? In my case callback would refresh the WR so that it shows updated details.

Looked through the SDK documentation and I can see that there is an option for add command to update folder collection, but i'm not sure if this can be applied to WR view and/or how to do it even if i had a folder view. Would appreciate any example code.

Ugis