Workflow script: playing with attributes

[Ger]

Background
The script uses two file-based attributes: FotoGY and activePage, and one global set, Fotoboek. The script is used to select images for web pages, ordered by chapters (Page), (sub-)pages (HTML) and sequence number (Sequence).
Every image can have more than 1 combinations of Page and HTML. Pages are predefined in the global set Fotoboek (reference).
In order to select and order images in a specific Page/HTML combination, all images are copied to activePage where the correct sequence number can be set.

The script
The script consists of three options:
1. Copy specific attribute information to activePage
2. Copy the (final) activePage modifications back to FotoGY
3. Renumber files in activePage

ad 1. Copy specific attribute information to activePage
In this option the selected Page/HTML information for every image in the FileWindow will be copied to activePage. If the attribute combination for Page/HTML doesn't exist in FotoGY, it will be created in activePage (with a Sequence number of 9999). Before writing, all attributes in activePage will be removed

ad 2. Copy the (final) activePage modifications back to FotoGY
This option is the reverse of option 1: data will be written back. If the Sequence number in activePage is >= 9999, the record in FotoGY will be deleted (meaning: image is not in selection). This option also works on all images in the FileWindow

ad 3. Renumber files in activePage
This option allows renumbering of the Sequence number and works for a subset of files. When reorganizing, I have a sort-preset that orders images based on Sequence number so the file window represents the final order. IMWS reads attributes using the image id. In order to maintain the order in the file window, I use the v1/files endpoint which represents the images in the display order

Conclusion
I have been using a similar vb script for quite some years, so before migrating to IMatch 2017 I had to convert at least this script. The script is very specific to (part of) my own workflow needs, I don't think the script as-is it will be of use for other users; I'm just posting it for people new to javascript (like me) and want to see as many examples as possible (like me).
It's a first attempt and probably can be improved in many ways, but it's a working model - and learned me a lot of elementary javascript, html/css, bootstrap, jQuery, IMatch services, promises, asynchroneous functions etc.

Ger

[sinus]

Hi Ger

Phew. This looks really great.
But I can see NOW not all the stuff, what you are doing with this script. But I will check this out for sure.
Because I work also with Attributes, it could be very interesting for me.

(maybe you have seen this thread https://www.photools.com/community/index.php?topic=6871.0 and
this https://www.photools.com/community/index.php?topic=6885.0

Thanks very much for sharing this! Very appreciated. 

[Ger]

Hi Markus,
Yes, I have seen the threads and your needs, but didn't go into detail (too busy struggling with my own script!).

Actually, with the limited experience I have now, I think moving from VB to IMWS/javascript is doable/achievable. There's of course a learning curve and it won't be easy to build flashy apps like our friend Mario is doing , but once you get the hang of it and learn some basic principles (ahh... these promises , it's definitely ok to work with them.

Ger

[ubacher]

The html code is quite involved. I assume I have to study bootstrap to understand it.
I am especially interested in drop-down menu - will see if I can figure out how it works.

As to what you are actually doing - could not figure it out. What 'problem' are you solving with this script?
Do you use it to assemble/reassemble a book?(meaning the assembly and sequence of pages (files in IM) )

[Mario]

I am especially interested in drop-down menu - will see if I can figure out how it works.

See: http://getbootstrap.com/components/#btn-dropdowns

Live examples of drop-down menus, with example code you can directly copy/paste into your code. Just change the menu item names and add the jQuery handlers to bind functions to the menus. Takes only a few minutes. It is easy.

[Ger]

Ubacher wrote:

The html code is quite involved. I assume I have to study bootstrap to understand it.

At first I thought to leave out all of this formatting - to make it more easy. I then looked at one or two of Mario's scripts and actually, using Bootstrap was quite straightforward and easy. It simplified quite a bit. It looks enormous with all these rows and codes, but once started, it was a piece of cake.

I am especially interested in drop-down menu - will see if I can figure out how it works.

Also here... bootstrap simplifies life enormously. the collapsible dropdown (accordeon) I used is described here: http://getbootstrap.com/javascript/#collapse.

As to what you are actually doing - could not figure it out

The concept is quite some years old. I want to generate (digital) albums for on a webpage. Images can be used in different albums. Every album can have 1 or more sections (webpages) and every section has an x-number of images.

Example (Album/Page > Webpage/HTML > Images/Sequence)
Mammals > Lion > images
Mammals > Cheetah > images
Observations > Cheetah hunting > images
etc (see this structure www.cubitjequap.nl)

In my database I have (example) a few 100 lions but on the website Mammals > Lion I only want to show 50 images.
To select and order these 50 images, i go to my keyword Mammals|Carnivores|Panthera Leo.

I use option 1 to create a temporary Page/HTML in my work-environment (activePage) and select the 50 images I want to include. I order these images with the Sequence attribute (either manually updating the attribute or using option 3).
Once I'm satisfied, I use option 2 to copy the work-environment results back to my main attribute (FotoGY). I do create the web albums using the settings in this attribute.

Hope this explains a bit more. If you want to know more, please let me know, happy to elaborate.

Ger

[ubacher]

I had a look at these dropdown examples before but they show only html code.
I need to figure out how to populate the menu via javascript and how to act on a clicked entry.
With all the terms involved it is confusing - distinguishing between bootstrap keywords, JQuery syntax .... and local/user generated terms.
.... still on the steep end of the learning curve!

[Ger]

I fill the listboxes (with attributes) in the fillListBox function.

The HTML listbox-variables  have the names 'lb1Page' and 'lb1HTML' (lines ~70-90):

Code Select Expand


                                    <div class="col-xs-4">
                                        <form class="form">
                                            <div class="form-group">
                                                <select id="lb1Page" class="form-control"></select>
                                            </div>
                                        </form>
                                    </div>


In the fillListBox procedure I assign a js-variable to the HTML variable (lines 444-445):

Code Select Expand


                        var lbPage = $('#lb1Page');
                        var lbHTML = $('#lb1HTML');


I then read the unique attributes Page and HTML into a simple array (lines 463 - 502). Once I have retrieved all unique attribute values, I add them to the list box values in lines 505-510:

Code Select Expand


                        // Add options to listbox
                        for (var x = 0; x < arOptionsPage.length; ++x) {
                            lbPage.append('<option name= "' + arOptionsPage[x] + '">' + arOptionsPage[x] + '</option>');
                        }
                        for (var x = 0; x < arOptionsHTML.length; ++x) {
                            lbHTML.append('<option name= "' + arOptionsHTML[x] + '">' + arOptionsHTML[x] + '</option>');
                        }


That's it.

The selected value (later in the program) has an option:selected marker:
(in the getParameters function, lines 533-534)

Code Select Expand


                        thePage = $('#lb1Page').find('option:selected').attr('name');
                        theHTML = $('#lb1HTML').find('option:selected').attr('name');


Ger

[Ger]

I removed all bugger from the workflow script to just show the listboxes in option 1.

Important: the fillListBox function uses v1/attributes. The name of the attribute set is in line 167 assigned to the variable thisSet:

Code Select Expand


var thisSet = 'FotoGY';  // This is the file-attribute set that will be retrieved by IMWS


and the two attribute values used are Page and HTML (lines 190, 202)

Code Select Expand


thisPage = r.result[x].data[y].Page;
thisHTML = r.result[x].data[y].HTML;


It's hard-coded (not nice, but ok...) so if you use a different attribute set, you have to adjust these

Ger

[ubacher]

Thank you Ger for your effort to help. I did study your (reduced) code and tried to see how I can modify it to
get a dropdown menu but I failed.
I did get the sample code shown in the link from Mario to work - with javascript code!

And as I then researched more I came across various other interesting code and I got side-tracked.
Did learn a lot about HTML/bootstrap this way though!
(Ended up modifying the app manager - posted elsewhere)