Hidding Input Filters

Not for basic Apps running by themselves, no. There is one potential option if you add the App to a workspace in Mashboard, but you must change the properties for the input parameters.

In most workspaces, each App has a title bar and one of the toolbar buttons on it allows users to edit input parameters. So the form is not always visible, but users have to know this button exists and what it is for. The title bar does, of course, take up some vertical space.

If you choose this option, you need to make the input parameter "visible" . Basically, input params can be "hidden", "read-only", "visible" or input parameters (the form is always visible for input). The actual properties you need to set within the App for these four variations is discussed in detail in http://www.jackbe.com/prestodocs/v3.0/apps/editAppProperties.html in the docs. If this is not clear, please let me know.

Hi Mitchell

Thank you for the reply , i dont see an option to change the properties of input parameters in the mash borad, Please take a look at the vidoe below , i have 3 input parameters and you see that my graph is half hidden down , i want to have the input boxes side by side , or a menu bar which allows to enter a input parameters values by selecting from drop down list box,Could you please send me a sample video file or something which demos it ?

http://screencast.com/t/ibKPvPfAbnGd

Thank you

The options to change the input parameters are in the App itself, not in Mashboard. Open the App in Presto Hub from the Browse page. This opens by default on the Preview tab. At the bottom of the page, underneath the preview of the App is a button to Edit App Settings. This is where you will find the options to control the input parameters for the App. It is identical to what was available when you first created the basic App.

Thats where we select the input parameters as Visible , and thats how i have selected in my App ( I guess you see my app in the video i have sent) , what i am looking for is , how do i rearrange the postion of the input filters ?

I think we've gotten confused between the terminology. Which isn't quite as simple as it should be.

The screencast you posted still shows your App input parameters as allowing user input. So App Maker includes form fields for these inputs within the body of the App and they are always visible.

What I was suggesting was surpressing these fields all together to make the input fields only accessible from the App toolbar.

I'm attaching three screenshots of a very silly App using Yahoo Weather which has a single input parameter. When I created the App (or later edited properties), I set the Allow User Input property to No and Visible to Yes. (mdc-inputs-config.png) This is what I was referring to as a "visible" parameter.

The second screen shot (mdc-inputs-app.png) shows this app in a workspace in Mashboard and as you can see, there is no field to enter a Zip code. The last shot (mdc-inputs-properties.png) shows the Properties for this App that opens from the Configure toolbar button. As you can see there is a Zip Code field. Users who can run the App can enter a different Zip Code to see different weather in the App. But that is the only way they have access to the field to change the input parameter.

Not sure if this is exactly what you want or not, but it is the only way to automatically hide the input parameter fields. There is no control over what order these fields come in or how they are placed in the form.

Hope this is clear and helps,

Thank you for getting more detail into this , if thats the only option we have how do we allow user to give the input? usually when we share the apps with user they do not have access to mashboard and all right ? so do we get an option to create the app including that tool bar ?

I could not trail and error this , as dont even find the options what you are seeing in the properties section :-(

Here is my video file again ...could you please let me know what might be the issue?

http://screencast.com/t/2eKuWCiNMgN

Well, it turns out to be completely useless. My apologies for leading you down the garden path.

What I described does not work (and shame on me for not having checked better). Or I should say, it only works inside Mashboard, which as your correctly pointed out doesn't do you any good. At least as I understand it right now, the only option is to either live with the basic App or create a custom App where you have complete control over input forms, buttons, etc.

Perhaps other MDC users have a better suggestion.

 Hi Radhika,

I've had a look at the screencasts you've posted and I see a problem. The Properties popup window is corrupt, each of the tabbed panels should contain a form, but for some reason the form container height is wrong and teh forms are being clipped. I checked this on FF,Chrome,Safari and IE8 and can't reproduce the problem you see. Can you let me know what browser and browser version you're using?

In Presto 3.1 the only way to get the sort of behaviour you want is to either create your own custom App or by extending the implementation of Presto.BasicApp, which is used for all Apps created by Presto from the Service Details page. This is a technique we use internally and in future releases we'll provide clearer extension points for App develoeprs to customize behaviour of Presto.BasicApps.

If you look at this App I've created on prestocloud, http://prestocloud.jackbe.com/prestohub/applauncher.html?mid=Custom_Local_Search

You'll see it is a simple app with a couple of inputs, when the input form is submitted, the form is automatically hidden and the input form details are appended to the App Header title. A new button icon has also been added to the RHS of the header which when clicked will toggle display of the input form. 

If you open this App in App Maker,  http://prestocloud.jackbe.com/prestohub/app-editor.html?mid=Custom_Local_Search , you'll see that as well as the App.xml file the App has been extended by adding a new javascript file, extension.js, if you look at the content of this file you'll see that it adds a single new method to the Presto.BasicApp.prototype object:

1. Presto.BasicApp.prototype.onLoad = function(app){

2. // onLoad method implemention

3. };

4.  

Presto.BasicApp doesnt usually have an implementation of this method, but when an app is instantiated, if it has an onLoad method, then it is called directly after calling the App's constructor function. The method has a single argument, a reference to the app object, which we can use to get access to the app's DOM. When this method is invoked, the BasicApp input form will already be rendered, we can inspect the input form, and do the following:

1. 1. Add a new button icon to the header
2. 2. Add a listener to the Apply button, which when clicked will hide the form and update the header text.

Here's the full method implementation:

Presto.BasicApp.prototype.onLoad = function(app){
    var root = jQuery(app.getRootElement()),
    basicAppInput = root.find('div.basic-app-input'),
    inputForm = basicAppInput.find('div.form-fields'),
    header = root.parentsUntil('div.app-main').parent().find('div.app-header'),
    headerLeft = header.find('h2.left'),
    headerRight = header.find('div.right');
  
    jQuery('<span/>').addClass('app-inputs').prependTo(headerRight);
  
    jQuery('<span/>').addClass('app-input-info').css({
        'font-style':'normal',
        'font-size':'13px',
        'padding-left': '20px'
    }).appendTo(headerLeft);
  
    jQuery('<a/>').addClass('action-app-embed app-action publish-link')
    .attr({
        'title':'Show/Hide Input Form',
        'href':'javascript:void(0);'
    }).css('background-position', '-120px 0')
    .appendTo(headerRight.find('span.app-inputs')).click(function(){
        inputForm.toggle();
    });

    jQuery(root).find('.action-apply').click(function(){
        var inputs = '';
        inputForm.find('div.fieldset').each(function(index){
            if(index > 0)inputs += ', ';
            inputs += jQuery(this).find('div').first().html() + ' : ' + jQuery(this).find('input').first().val();
        });
        headerLeft.find('span.app-input-info').html(inputs);
        inputForm.hide();
    });

};

Here are the steps to extend a basic app:

1. 1. Open the Presto.BasicApp you want to extend in App Editor
2. 2. Click Add to add a new resource and add a new javascript file, say named extension.js. You can either upload your javascript file from your local directory or use cut and paste it into the editor. When the new resource is added the App Editor will append a new <requires> element in the app spec. 
3. 3. Switch to the new resource, extension.js and enter you custom javascript.
4. 4. Switch back to the App spec and locate the new <require> element in the App spec and manually add a loadconfirmation attribute, this is used to verify the file has completed loading when the app is loaded in a web page. see here for more details on loadconfirmation, http://www.jackbe.com/prestodocs/v3.0/apps-dev/requiresRef.html.  
5. 5. Save All and Run the App to check for errors.

More details on using App Editor can be found here, http://www.jackbe.com/prestodocs/v3.0/apps-dev/editor-intro.html

With the custom App I've posted there are a few restrictions, it requires the App Header to be visible in order to display the input info and the toggle button. 

Because it extends Presto.BasicApp prototype object, it will affect all BasicApps rendered in the page, which may be a problem if using this app in Mashboard, where contained apps are embedded inline by default. There are other ways of working around this if it is an issue.

Hope this helps.

Jeremy

Hi Jeremy

Thank you very much for the reply , i have tried to follow the steps , but somehow my system hangs when ever i am adding the extension.js file ....

I am using IE 8 , and also i cannot open , your app ....i get the below error

Failed to load app - There was an error while loading '/presto/files/system/mashlets/Custom_Local_Search/js/extension.js - 20 second time out.

I think i need to figure out the issue causing this from my end ..any suggetions ....?

Thanks

Radhika

 Hi Radhika,

There were a couple of problems with the code running on IE8. The main problem is a bug which causes the javascript file loading mechanism to prematurely detect that the presto-basic-app library, which defines Presto.BasicApp, has completed loading, this enables the extensions.js to load and complete loading before presto-basic-app library, and because it  is dependent on Presto.BasicApp.prototype object existing was causing the fatal error. I tracked this down to a known issue which has been fixed (REAP-13319, for my reference).

As a workaround, I've used a setInternal function to wait for Presto.BasicApp constructor function to be defined before adding the Presto.BasicApp.prototype.onLoad function. This is ugly but it works. So if you look at extension.js  now you'll see it looks something like this:

var interval = setInterval(function(){
    if(Presto && Presto.BasicApp && typeof Presto.BasicApp == 'function'){
        clearInterval(interval);
        Presto.BasicApp.prototype.onLoad = function(app){
             ....
             ....
        };
    } 
}, 100);

There was one other bug, setting the app-input-info font-style was wrong. 

You'll need to clear your browser cache before this will work.

Good luck 

Jeremy

Thank you very much Jeremy , i am able to hide the input filters now , but the icon , looks something like settings instead of a dorpdown box, but i can live with it i guess, my another question would be , how do i re-arrange the filters ?

-Radhika

 You can arrange the form inputs using relative position, here's some jquery code I added to the app:

    inputs = inputForm.find('div.fieldset');
    inputForm.css({'position':'relative', 'top':'0px', 'left':'0px'});
    inputs.each(function(index){
        jQuery(this).css({
            position: 'absolute',
            top: '0',
            left: (index * 200) + 'px'
        });
    });
    inputForm.find('button').parent().css('padding', '60px 0 0 4px');

 After all this work on this App, I'd love to see a picture of it when it's done!

Hi

Here is the screencast of my app , you find 2 bugs here ,

http://screencast.com/t/eh8y0QN4m5L

1. The dates do not change , which has been already escalated to Jackbe and they have provided us a patch which is going to be added to our production environment soon.

2.Its not a bug , but i need somehelp from you guys as the cluster name shows "undefined" its not showing the selected cluster name , i think that its something which need to be included in the code given by Jeremy to enable the options of hide/show the filters.

I truely appreciate the help provided by you people in helping me ....

Thank you

Radhika

 That looks pretty good.

To fix the undefined value just replace the line:

            inputs += jQuery(this).find('div').first().html() + ' : ' + jQuery(this).find('input').first().val();

with

            inputs += jQuery(this).find('div').first().html() + ' : ' + jQuery(this).find('.form-field').first().val();  

the code assumed all form fields were <input> tags and you are using a <select> tag.

Unfortunately , that did not work :-(

Attached the complete code

 Maybe you just need to clear your browser cache. 

I used the onLoad method in your CODE.doc on my own app and it successfully updates the header, but the code is out of date because it doesn't include the change to lay inputs out horizontally, which I can see you're using in your screencast.

You can see it working here:

http://prestocloud.jackbe.com/prestohub/applauncher.html?mid=Custom_Local_Search

Oh Yeah , i did not clear the browser history and when i did i can see the selections , so any change in the code requires browser history to be cleared.. correct?

And the Code.doc is  all the code currently i have in the app (which is the screencast one) , i actually dont have the block of code you gave me for arranging the input parameterts , initially i copied that code to the extension .js file and saved it and ran report(i cleared browser history) , but did not find any change in the postion of input parameters. so i removed it from there later.

I think i did'nt copying the code where it has to be....

Thank you !