Koha-US The Terrific Every-Other-Thursday Training Videos, 27 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: TTEOT Training Video - S1E2 - jQuery: Status Enhancements

Description

In this week's terrifying episode, Christopher and George monkey around with the statuses in the detail page so staff can see jaw dropping detail between different statuses. Christopher also learns how to correctly spell TERRIFIC on the title screen.

Referenced code:
https://wiki.koha-community.org/wiki/JQuery_Library#Enhance_the_visibility_of_statuses_on_the_detail.pl_page_for_staff_.2818.x.29
https://wiki.koha-community.org/wiki/JQuery_Library#Enhance_the_visibility_of_statuses_on_the_detail.pl_page_for_staff_.2819.x.29

Music: https://www.bensound.com

A

Welcome to the terrific every other thursday training video by koha u.s, I'm christopher brannon, with the coeur d'alene public library.

B

And I'm george williams with the northeast kansas library system,.

A

And this is episode 2. this week we are going to be expanding on our previous video.

A

Previously george uh introduced how to enhance the uh return cart feature uh so that it stands out a little bit better this week, we're going to enhance more statuses on the staff side so that those statuses stand out and are uh more distinguishable between each other. So that's what we're going to be walking through before I get started here.

A

I just wanted to point out the koha us we've updated the website so that you can easily get to the videos if you move to the learn from koha us page up at the top you'll see some uh quick links and you'll see koha us videos, and that will take you straight to our videos where this one will be added soon cool all right.

A

So um we're going to be talking today about some jquery that can be added to enhance the statuses right now. I've got those enhancements loaded. This is what it's going to end up. Looking like, you can see uh the enhancement that we talked about last time that george went through to enhance the recently returned. Now we're going to be enhancing all of these statuses over here, I'm going to jump over to the jquery real, quick and pull those out.

A

So that you can see what it looks like without so this is what it looks like without those. In fact, I I took out your recently returned.

B

You killed that one too yeah.

A

So that's right things kind of blend in here it's pretty drab and you kind of have to stop and think a little bit more about what you're looking at uh you know, there's there's some things that stand out with the lost and damaged and withdrawn, but um I wanted to uh add some jquery where everything stood out a little bit more. It was a little bit more obvious what you're looking to and your eye naturally gravitates towards the things that you're looking for.

A

So that's where this came from so I'm gonna grab, I'm gonna jump back over to our jquery. So now this this enhancement is only on the staff side. I don't have anything developed for the uh the opec side. If you wanted to do something you you could not all the details uh are the same on both sides for the statuses.

A

Obviously, there's not patron information on the the opec side, so there are some things that can be translated over to the public side, but uh my my enhancement here is uh focusing strictly on the staff side. Well and I'll. Tell you why I.

B

Didn't add anything to the to the opac is because you know this primarily affects things that are missing and lost are some of the things that it affects and we have all those items if they're lost or missing, we use oatmak hidden items to just hide those items. Yeah.

A

So for us there isn't.

B

Anything uh there are only a couple of things that this would actually affect in the opac, because we we hide all those from patrons anyways. So so, why bother enhancing the opec.

A

You you could take a few of the the pieces that you want that do translate over and you could adjust them public side. um So I'm going to walk. You walk us through uh the the the portions I've. I've broken this down into three sections. This is available in the uh jquery library. um I have two versions out there, there's one for uh 18x versions and I'm focusing on the 19x versions, because that's what we're dealing with I'll start out.

A

With this section, so I've got three groupings here, this first section that I've added is simply adding wrappers around uh different statuses. Some of the statuses had wrappers wrapped around them already for us to manipulate, but I'm adding wrappers to the remainders of those so that we can easily manipulate them. Basically is some way to identify those statuses so that we can, we can point to them and do things with them. So I'm going to write that and that doesn't really do anything.

A

If I, you know refresh this screen, you're not going to see any any changes here, but what it does. Let's take a look at this first one. This first section uh adds a wrapper to items with a not for loan status so down here we have a not for loan, I'm going to inspect that and open up that section here. So this basically added a.

A

This added the span class uh with uh not for loan class on it. So that's what this is right here. The span.

B

It wrapped, without that there's no html element right.

A

That you can apply the jquery to right right. Let me let me uh pull that out of there real quick.

A

A

That we'll look at that just to make sure that we're in the right place here, so it basically just says status. So there's nothing. There's nothing specific about this. This status to say I just want to dress up not for loans.

A

With this all right, I there technically there's there's some ways that I could have done it, but this was a much cleaner way to say: let's label everything with not for loan in it as a not for loan status, and it just makes it easier for us to refer to it later on down the road.

B

And that's something in the jquery is that text node um that thing that finds the text node, that's actually a pretty sophisticated piece of jquery compared to some of the things that you can do where you actually have to find this thing that essentially you're saying look for these things that don't have any uh any uh rappers around wrappers around them. Essentially.

A

Yeah um so yeah um and it doesn't have any html tags around it. So this this is. This is really helpful to be able to specifically grab that that that information we had to do that for uh the uh items that had uh item level holds on it, and we also had to do that for uh items that were on hold and weeding.

A

So we created wrappers for all of those one of the things that.

A

We get a side effect from in this. The way that we're grabbing this with this node dot text node is that sometimes it will grab some blank white space and wrap that separately. So we end up with uh extra wrappers that are just around empty space that doesn't sound helpful. No, no! So you end up manipulating things that don't need to be manipulated. You get some strange side effects, so I'm gonna. I.

B

Bet, there's a way to get rid of that.

A

Oh yes, there is I've got another section here, another three uh groups of code. These are basically going to clean up those empty white spaces around the the good sections that we want. We want to keep and clear out the the um sections like we get some uh hold sections that have the waiting at that have absolutely nothing in them and so we're going to remove those. So I'm going to apply that and then jump back over here.

A

So you see all this white space, that's in in here with this particular wrapper. If I refresh this.

A

Go back to that not for.

A

Loan, oh I lied. There is some white space still left in here. I didn't clean up all of the white space, but we're getting rid of a lot of the um the empty ones that are not there like there you, I guess we could explain we're getting.

B

Rid of all the ones that are completely empty, correct.

A

So this does a lot of uh cleanup.

A

Now now comes the good part.

A

I've got four sections of code in here that are going to add our actual uh symbols and uh colors, where needed so for loss and damage, we're going to be adding the triangle, bang or another term for bang. As the exclamation point, it's going to be adding the triangle with the x exclamation point in it: two statuses, with the loss, class and statuses with the damage class.

A

So here's that section where it adds the actual symbol and then any items that are in transit, they're, going to get a truck symbol and I'm coloring them orange kind of I kind of decided to go with orange for items that are in a transition or a hold pattern.

A

So anything that's on hold or in transit is going to be colored orange in this case, not for loan uh withdrawn statuses are given the crossed out or the ban uh symbol, and if it's not read already, it's going to be changed to to red and item level holds things that are actually waiting, uh we're adding the info circle uh symbol to that. uh To that status.

A

um That's excuse me, that's that's for item level holds and then the waiting holds the actual waiting holes are given the clock symbol and they are colored orange. Remember we're coloring uh uh the holds uh that are in transit or waiting uh orange.

B

So um where did people get the uh the icons? Could you explain it? I know we explained that in the last video, but it might bear to- and I did put a link to that in the chat yeah.

A

Good question: I always I haven't: I've never saved the the place for it. I just simply do a search for fa font, awesome and click on font awesome icons. It comes up in my results.

A

And then I get all these wonderful symbols and if there's something specific that you're looking for it has a dandy uh search bar. So I can find exactly what I need and if you click on it.

A

You can actually get the portion of code that you need just to stick it in there right.

B

And the fun awesome icons are already built into cohort right.

A

B

So we don't need to do anything other than add that code and they're there.

A

Exactly really handy, I love awesome fonts, so those uh lines of code. I said four earlier that are actually five uh groups of code uh there for those symbols. I'm gonna save that.

B

A

A librarian we know you're, not good,.

B

At math, so you don't have to explain four or five to us. We know that.

A

That's why it programmed that you're.

B

A

I don't have to figure it out, okay, so let's refresh this screen and there are symbols, so we had the the band symbol added to the not for loan and the withdrawn the triangle with the the bang or the the exclamation point added to lost in damaged items.

A

We have the clock for items that are actually on hold and waiting the information uh symbol for items that are that have an item level hold on them, a little truck for things that are in transit, the intransit and the hold are colored orange items that have what I call critical issues or concerning issues are colored red left alone, the things that are available. If you wanted you could you could you could enhance that one as well? You could put a check mark or make it.

B

A

Or whatever, whatever you want to do with that.

B

And the colors people aren't don't have to use those colors. If they will choose different ones, they can. They can choose whatever colors. They want absolutely.

A

So there's there's one more uh bit of code that I'm going to add to this, to finish this up, one of the things that bugs me, especially because we have more columns in our uh our details, screen that kind of bunch this up a little bit more and we end up getting uh this line. That says you know checked out to so, and so you know.

A

Obviously the name is longer on a real database and it says, do and then the due dates actually like the the whole says hold for, and then it ends up wrapped on the next line, so that a little bit. So I am here- and this is basically going to find those uh sections uh where I'm using some uh regex to find the hold for or the the the do information and add some indentation to it and hyphen getting the do. The word do a capital d instead of a lowercase d.

A

So this is the line that we're going to be changing around on the next line.

A

You know it's indented in hyphen uh just to indicate it has to do with the previous line, and so does this one right here: cool.

A

So that's about it looks.

B

A

So um again, these uh items, uh jquery library, um I believe you pitch- for uh status, enhancement, it'll, take you right to it and um I will update it actually to include more uh description of those sections right now. It's it's without a lot of those descriptions, I'll add the descriptions in there. So it's a little bit easier to understand those. What sections are doing? What uh but I'll keep that updated and if I need to make any changes for the next version in 20 I'll put out a version for that as well cool.

A

I look forward to all the changes that are coming with mess up all this.

A

um Great, so we will be back in another two weeks. um I think the next one that we have slated uh for the next video is going to talk about uh slip. Modifications. So am I doing that one? No! I'm walking us through that. Oh okay, awesome! All right, I'm better!

A

Well, thanks george, for a couple weeks, everybody for joining and we'll see you again.

A