I’m having an issue in Chrome on an html page and I’m not sure what to do about it.

I have an html page that is accessed through the portal. On the page, we have a filter box (we actually have several others also) for activity name. When they page opens, we load that activity name filter box with about 9000 rows. That filter box has an option to select ALL (default) or multi-select specific activities.

We open the page with a few reports and that activity name (along with other filters) is applied with the default of ALL. They can select any activities they want and hit Apply Filters button and the reports will rerun with the selections made.

But the users requested a search box for the activity name filter. So they would like to be able to manually enter text in a search box, hit an image of an magnifying glass, and then the activity name filter box would show only activities that contain that particular string.

The activity names are coming from a permanent hold file called HOLD001. Here is my code that I use to populate the activity name filter box:

-SET &HOLD_FILE1 = 'staffing_model_data/hold010';
-DEFAULT &ACTIVITY_NAME_SEARCH = '';
-IF &ACTIVITY_NAME_SEARCH GT ' ' THEN GOTO ACTIVITY_SEARCH;
-PRINT_ALL_ACTIVITY
TABLE FILE &HOLD_FILE1
PRINT ACTIVITY_NAME
ON TABLE PCHOLD FORMAT HTML
END
-RUN
-GOTO ACTIVITY_DONE
-ACTIVITY_SEARCH
-SET &ACTIVITY_NAME_SEARCH_UPCASE = UPCASE(250,&ACTIVITY_NAME_SEARCH,&ACTIVITY_NAME_SEARCH);
TABLE FILE &HOLD_FILE1
PRINT ACTIVITY_NAME
WHERE UPCASE(250,ACTIVITY_NAME,ACTIVITY_NAME) CONTAINS '&ACTIVITY_NAME_SEARCH_UPCASE'
ON TABLE PCHOLD FORMAT HTML
END
-RUN
-GOTO ACTIVITY_DONE
-ACTIVITY_DONE

On the HTML page, I created my filter box which is tied to the variable name ACTIVITY_NAME. I created an edit box called EDIT1 that is open for the user to type what they want. EDIT1 is tied to ACTIVITY_NAME_SEARCH. There is an image next to the search box of an magnifying glass. When that is clicked, I refresh the filter box for activity name.

This all works perfect in IE. But it does not work in Chrome. I can’t get my app studio (I’m using 8104) to run anything in a chrome window so I’m working in the portal for testing. Generally if we have issues, it’s with IE and not Chrome. But I can’t even look at the code behind the scenes of the filter box (by using set echo=’all’) because the browser won’t allow me to view the source of a filter box. I tried to recreated using the CAR file but for some reason, my version of app studio won’t allow the filter box to work for CAR level data. The filter box just pops up empty every time.

I would assume for some reason, Chrome doesn’t like the edit box and isn’t passing it to the filter box. But I don’t understand why. Has anyone ever done anything like this with Chrome? Is there a trick or some way I can force with javascript? My next step is to open a case but I wanted to try this board first since it’s always been so helpful.

This message has been edited. Last edited by: FP Mod Chuck,

April

I'm not sure why Chrome is not working with this page but I wanted to make you aware of a WebFOCUS feature. While editing your html form with App Studio you can right mouse click on the filter control and choose 'Add Paging/Search control and you won't need your edit box. I don't have 8.1.04 but this is definitely an option with 8.1.05 so check and see if that feature is available with 8.1.04 and see if it solves your problem.

That's a great suggestion! I've never used that before. But I can see a few problems with it right away. Might be a problem with 8104 but when you click the setting button so you could search differently (they won't like the search being a prefix - they want whatever they type to be found anywhere in the string) it pops up and behind the other filter below it.

I searched focal point with a way to come with certain settings to be defaulted so the user would never need to click the settings button but couldn't find where those questions had ever been answered. Also, the reset button isn't lined up properly and I can't find a way to fix that. My users are quite picky. Usually I end up having to build things like the edit1 because of not being able to fully customize the defaults and appearances.

But I will for sure keep this 'Add Paging/Search' control in my pocket for another use where it might also work. We are planning on updating to 8.2 in a few months and maybe it's even a little difference there....

April,

I haven't played with Chuck's option (thanks for the tip, Chuck), but recently set up something with exactly the functionality you're looking for using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/). I had to hard link jQuery and the Chosen source at the top of my page, which throws the WebFocus GUI editor into fits (just remove those lines before GUI editing). I believe the following code snippets contain all the critical pieces to make this work:

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/approot/my-app/chosen/chosen-jquery-min.js" type="text/javascript"></script>

<script type="text/javascript">
function onInitialUpdate() {
   $('.sel_chosen').chosen();  
}
</script>

<style type="text/css">
div.chosen_div input {
   float:none;
}
</style>

<div class="chosen_div">

<label tabindex="-1" class="IBI_ReportControlLabel internal_default" id="lblMajor" for="selMajor">Major
   <select tabindex="1" class="IBI_ReportControlTarget IBI_rounded_s internal_default sel_chosen" id="selMajor" size="1" sourcetype="typeMaster" firsttimeopen="1" name="major">
   </select>
</label>

</div> 

I'm not Javascript expert, so there might be better ways, but I'm very happy with my results!

- Rob

Rob,

Thank you for the heads up on Chosen.js. Really nice little library.

Looking at the implementation outside of IBIdom, this is how I got it working:

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css'/>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js'></script>
    </head>
    <body>
        <label>Pets:</label>
        <div>
            <select id="pet-select" data-placeholder="Choose a pet...">
                <option value=""></option>
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
                <option value="hamster">Hamster</option>
                <option value="parrot">Parrot</option>
                <option value="spider">Spider</option>
                <option value="goldfish">Goldfish</option>
            </select>
        </div>
        <br>
        <label>Food:</label>
        <div>
            <select id="food-select" multiple data-placeholder="Choose your food...">
                <option value="chips">Chips</option>
                <option value="apple">Apple</option>
                <option value="pear">Pear</option>
                <option value="potato">Potato</option>
                <option value="tomato">Tomato</option>
                <option value="carrot">Carrot</option>
            </select>
        </div>
        
        <script src="scripts.js"></script>
    </body>
</html>

Then in my scripts.js file, I just added this:

$("#pet-select").chosen({
    width: "50%"
});

$("#food-select").chosen({
    width: "50%"
});

So, basically, you just need to add in:

jquery.min.js
chosen.min.css
chosen.jquery.min.js

then initialize the library functionality in your Js on the select elements you want it applied to, adding in any options that enhance it further.

Nice!

This message has been edited. Last edited by: CoolGuy,

Great Library. Thanks for sharing.

I got this working on the HTML canvas. All you need to do is add in the libraries in the document settings. I found them all on cdnjs and referenced them from there.

  
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"

Then in the Embedded JavaScript tab, I added the following at the bottom:

  
function onInitialUpdate() {
   $('.sel_chosen').chosen();
}

Then you need to clear out all the classes from the control and add in 'sel_chosen' to the classes (note that the internal_default class will come back and that's okay)


Last, to keep the control from floating to the top, you need to right-click on the container and select 'Add selected to a new container' and make sure that that new container does NOT have responsive enabled.

This message has been edited. Last edited by: Hallway,

It makes my day to see posts like this.

CoolGuy and Hallway, Thanks for the tips on making this play nice with WebFOCUS!