06-Applicant_Dashboard - SCAI004

In this video, we're going to put together the Applicant's Dashboard. Up to this point, we've built out the Company User's Dashboard, where they can manage their job listings, any applications that have come in for those jobs, and their account settings. The Applicant's Dashboard, on the other hand, is going to be a little bit simpler. We're actually only going to have two tabs for them. The applications that they've submitted to other jobs, and their own account settings, which is just going to be their credentials and any general user profile information. If you recall, for the Company User, their account settings had both company information as well as the company admin's info. So, I'm going to start by cloning this page, because I'd like to keep the dashboards for both user types in separate places. As my application continues to evolve, and they likely end up having more unique features that are unique to those user types, it's going to be easier for me to manage if they're on separate pages. Now, of course, I could have this all on one page, and have conditions around all of the different groups to ensure that Company Users only see Company functionality, and then Applicant Users can only access the containers and the features related to those applicants. So, I'm going to right-click and clone this page, and we're going to give it a name here that matches closely our Company User. I'm going to call this Dash Applicant, because I might run out of characters if I don't abbreviate something there. Applicant, okay. This is going to be a complete copy of the Company User, and I'm going to start by removing this first group for Jobs, because the applicant doesn't need to have that. So, we'll get rid of that one, just hit Delete on my keyboard or Backspace. I'll also remove the Menu item. So, now the applicant is just going to tab between Applications and Account. Now, for the Application side of things, let's open up both the left and right side. The left side, we're going to modify the Repeating Group so that this is filtered on the current user's submitted applications, right? From the company's perspective, they're seeing applications coming from multiple users, but from the applicant's perspective, we just want to see our own. I'm going to leave the structure of this mostly the same here. We might change some of the content in here, but at the Repeating Group level, the type of content is still going to be Application, and then the data source is going to be a Search for Application. We're going to remove the Company Filter, right, because I might be sending in applications for various companies. We'll leave the filters for the Status and the Job Post, but we're also going to include an Applicant constraint here so that I'm only seeing my own, Applicant equals Current User. Now, let's just take a quick look at these filters up here to see if we need to make any adjustments. An application is created by the applicant themselves. If we're talking about managing statuses around the application, that applicant can actually control most of these here, right? They can create the application. It starts off in a draft format. They can submit it. The company would set it to interviewing. The company would also extend an offer or hire them or mark it as rejected, but the applicant can mark it as withdrawn. Maybe they change their mind. They can accept the offer or they can reject a potential job offer. So, both sides will have control over this, but it does lean more in the applicant's control. So, we'll leave the constraint here in our data source so that they can filter and view all of their draft applications versus their submitted applications and so on. Now, for the Job dropdown, we can address this a few ways. We can either leave it out, and that way the applicant is seeing all of their applications together, or we can help the applicant if they are someone who is going to send applications in for many jobs, cast a wide net, and be able to filter from there. The idea around this, however, is to filter so that you can see a smaller list. From the applicant's perspective, when they filter on a job, they are only going to see one application because we probably wouldn't want to allow them to send in more than one application for the same job. But, if anything, this could help them find an application by job if they are someone who sends in many applications. So, this data source is not going to be a general search of jobs. Instead, we're going to go through the applications that the applicant has created and then get to the jobs from there. So, we'll search for applications where the applicant equals the current user. So, every application is tied to a job post. So, from that resulting list, we'll go to the job posts. Each application's individual job post. That is now our data source here. For safety, I'm also going to add a unique elements operator just in case they do end up creating multiple applications for the same job post. We don't want to see that job post listed twice. We don't want to see duplicates. So, they'll choose the job post and if there happen to be more than one application, those will show up here because they're tied to the same data source. Alright, so that will help us filter our applications. Here we have the status, the job post, and the applicant. Inside, we're displaying the applicant's email right now because it was copied over from the company user, but obviously the applicant doesn't need to see their own email address in all of these fields. So, instead, we'll display the company. So, the applications related companies name like that. We could also get to it through the job post. The applications related job posts, companies, right, job posts, companies, name. That's another way to do it. It goes through one more table, but we have multiple relationships set up in our data structure that it gives us some flexibility there. Down below, we're displaying the job post title, which I think is perfectly fine to keep. Over on the right, we're displaying the status of the application and I think all the rest of the configuration here is good to go. Now, on the right side, we do want to display some different info because right now, this is from the perspective of the company user making a decision on that application versus the applicant themselves needing to see all of the details that they submitted. Now, to be clear, this is not where they create their application. This is simply to manage applications that have already been created. We will address submitting an application from a search for jobs in a separate video. For now, we just want to display the info. So, this group is type application. So, when we click on this view button, it's going to pass data over to that group, right? We'll do the display data action. This is working in the same way as it has been for the company user. That way, the group on the right has that data source. This inner group will continue to reference that data source so that everything inside can display all the information. At the top here, again, instead of displaying the applicant's email, I'm going to go ahead and display the company. Let's go through the company's name like this and below that, I want to display the job title. So, I'm going to copy this text and have this in bold as well. The company name and then the job post title like that. The applicant can remember what everything is for. Here, we'll keep the submission date of their application. We'll keep the current status. Yeah, I think those are all the top level details. Same thing for their resume. So, they can view the resume that they had uploaded. Now, if they wanted to switch out their resume, we can also have a file uploader so that they can change it out if that's a possibility that we're allowing here. The way that we're going to approach it is that everything should be submitted when they first send in that form and this is now, it's kind of locked. Once it's submitted, it's locked. Down below, we don't really need to have the applicant send in a message so I'm going to remove this entire section here and instead, we're going to give the applicant the ability to withdraw their application or let's say submit if it's in a draft state. So, they've begun their application as a result of doing a search for jobs. They've filled everything out. Again, that's going to happen in a separate place but maybe they didn't fully submit it. They wanted to review it or like I said, they can swap out their resume before actually changing the status to submit so we will leave this button here for them to make that final submission. I'm going to remove this middle button and since I'm talking about switching out the resume, we might as well just offer that in here. Let me add a file uploader to this group in here. Let's place it somewhere there for now and I'll place it after the button. Let's center it inside of the group and I'm going to make it a little bit bigger here, maybe 200 pixels and I'm going to change the placeholder to say change or let's say replace resume file like that. Okay, and now we can hook up these workflows. So, when they go to replace their resume file let's start a workflow from here. Start a workflow. Okay, this is going to go under our applications folder here. This is going to modify. It's going to make a change to the parent groups application and we're going to swap out the resume. Resume equals this file uploader's value and I want to reset the inputs, this one here, so that the file uploader clears out. So, the moment they upload a file it will automatically be saved to the record and then this uploader resets itself and they'll be able to view it from there. This link element can also be hidden and collapsed if they don't have a resume uploaded to begin with. So, I usually like to put collapsing things inside of groups, so that's what I'm going to do right now. I'm going to group just this one element, the link button here, in an aligned to parent container. That way I can keep it perfectly centered inside the aligned to parent container and that container is going to be set to collapse when hidden. I'm going to go to the container, let me rename this to group view resume. So, this will collapse when hidden and we'll leave it visible by default but in the condition we'll say when the parent group's application's resume is empty, then we hide this group. So, that way it will collapse down, the uploader will shift up and that will help the user understand, okay, I need to create my resume file. In fact, we can also change the wording of the placeholder to say add resume file instead of replace if this is the first time they're submitting their resume. So, let's do that here. Let's add a condition on this file uploader. I'm going to say when the parent group's application resume is empty, then I want to change the placeholder so that it says add resume file instead. Very clear labeling for the user will keep that experience more intuitive for them and easier to follow. We don't want any confusion here. So, let's set up the workflows for these other buttons. I'm going to hit submit application on this one and let's see what we have so far. So, this is making a change to the application and the status, this was from our previous button from the other page. So, I'm just going to swap this out or submit it like that. I'll go to my applications folder here. And then for the withdraw application, we're going to change the status to withdraw. That's okay. We can also, let's see what else we have on here. We've got the conditions or we've got the workflow for the view. Let me see if there are any workflows that we've missed. I think this covers all of them. So, I'm going to run as one of my applicant users that have applications already in the system and I believe Joey is our applicant example. So, I'm going to run as this person here. And we may need to set up our defaults so that it shows our applications as the first group. So, right now, our applications group, the custom state it's responding to is tab two. So, we got rid of tab one. So, I'm going to renumber these so that they make a little bit more sense. We don't really want to start on number two. So, I'll change this group applications to be visible when tab is one. And then, if I go over to my next group here, which we'll work on in a moment, I'll have this one be visible when tab is two. And then, under my navigation workflows, when applications is clicked, we'll just need to make sure that we set this to one. And then, when the account button is clicked, that one goes to two. So, we basically got rid of tab three. We shifted everything one tab over because we removed the jobs tab at the very beginning of this video. And, at the page level, our default is still on one. So, in other words, our default is going to start us off on our applications group. So, I'm going to refresh the page one more time and I shouldn't have to click on the tab in order to see it. There we go. So, you can see that I'm logged in as Joey and I'm seeing all of my applications here. I don't have a status because this was a new field that I introduced in a recent video where we use option sets instead of a text value. So, I'm just going to view one of these applications. You can see that there's no status. But then, I'm going to submit so that we can now save the appropriate value with our new option set choice here to it. So, there's our submission. Oh, one thing I noticed is that we have not updated the submission timestamp. Okay. So, I'm going to go back to the workflow here under applications and we click on submit. In addition to changing the status, we also want to modify the submission date field. And we're just going to set that to the current date and time. So, I'll refresh the page so we can see that happening again. We'll go back to this grant writer position and I'm just going to hit submit again from here and we can see the date has now changed to that. If I go to the next application, I'll hit withdraw. So, we can modify. And we can see here in the dropdown that I can filter my applications by status. So, I'm going to select withdraw and it's going to show me just the two applications that have that status. We'll go to submitted. I don't think I have any in draft. If I go back here, it shows all of them. And over here, we can see all of the jobs that are associated with all of my applications. Now, notice that I'm seeing five jobs but only four applications. And that's because my repeating group here is set to a fixed number of cells. I'm only showing four at a time. I can make this dynamic, of course. So, let's make the rows dynamic so that it's a scrolling list instead. So, I'll refresh the page here. So, all I did was unfix the number of rows. Okay, so now we can see there's that last application and let's make this a submitted as well. So, there are all my applications. If I go to internal auditor. So, now it's filtering based off of the job. I could use these in combination. So, if I'm looking for a, I don't know if I have, let me see if I have any of these. No, they're all going to be unique. But let's say I had a job here that I've applied to and I've applied to it multiple times. And maybe one of them is in a draft, one of them is withdrawn, something like that. And I wanted to isolate them by status. So, if I were to choose draft, which I know I don't have a dean of students application for draft. I only have one for submitted. It's going to go away because it doesn't meet both of those conditions. But if I go to submitted then it will appear because it meets both the job and status conditions up here. Of course, I can go back to the start. Now, you notice how the placeholders go away from those drop downs. We can correct that by resetting the group here. Let me rename this group. Group filters. Resetting the group that contains them. Because if you reset a group, it will reset the inner input. And that will take it back to its default state, which will show the placeholder. So, you can do something like a reset button. Let's do a little text here to the right of the jobs drop down. And I'm going to change the sizing of this just a little bit. Let's go with 225. Probably not enough. I'll do 200. There we go. And I'm going to put this over to the right and centered. And this will say reset. Okay. So, clicking on that text here, under my applications tab, this is going to reset the group. Reset data. So, I'll choose that filters group, which I named. And that will take the drop downs back down to their default state. Okay. So, if I select any one of these, like this, and then hit reset, you see it clears it all out and it brings everything back. Great. Now, let's see if we can view this resume. There should only be one if we have a file there. Now, it looks like we've just uploaded some images. But the idea is that it just opens up whatever file was saved to the field. So, we have one there. Replacing the resume file. Let's see if we can upload a new image or file of some sort. Let's do, let me go into my sample files here. This is just another PNG. I'm going to swap it out. This little cloud icon. Okay. So, you see how it quickly shifted here. So, for a moment, it showed us the file name. But because we cleared out the input the moment it saved to the database, it just resets itself on its own. So, now if I view the resume, I'm seeing my updated file there. So, we know it did update properly. You could also add an alert message to the top of the screen so that as soon as that happens, it lets the user know more clearly that it was successful. So, again, under the file uploader workflow, we can also show our alert message that we have here. We can keep that message there. It says your changes have been saved. That's from our previous dashboard for the company user, but it will apply well here. Now, this row of buttons here, I kind of want it to appear at the bottom of the group. So, what I'm going to do is go to the group that's above, go over to the layout tab, and have it not fit to content. Right now, the height of this group is just as tall as it needs to be to fit the content inside. But if I turn that off, then we can control the height by either setting a minimum or a maximum from there. Or without all of these things, it's just going to expand until it is stopped by something. In this case, it's stopped by this group. And there's a 20-pixel gap in between them because the right side group has a 20-pixel row gap. If I remove that, you see how this group expanded just a little bit more? It filled that empty space. Okay, so that's why that was happening. I'm going to bring back the gap spacing. And also, just as a reminder, we have some 20-pixel padding on the inside of our right group here, the parent element there. There's 20-pixel padding at the bottom. So, again, if I got rid of that, then that moves all the way down. So, we have some forced spacing, but I've opened up the height of this so that it can push this row down. So, that's pretty much it as far as managing their applications. We could fine-tune a few other areas. We could have a whole messaging system here so that they can communicate with the company user. We could also create conditions around these buttons so that depending on whatever status the application is in currently, maybe they're not allowed to withdraw anymore or they're not allowed to submit anymore. For example, if an offer has been accepted, maybe we can't withdraw the application. So, for example, under the condition I can say if the application's status, and I'm going to change my new option set here, is offer extended, then maybe we hide this button. Or we could change the appearance so that it looks faded out and it's not clickable. Or, if it's extended, let's see what other statuses might apply here. If it's extended or if it is application rejected. Any one of these things where it doesn't make sense to withdraw it, then we can hide it so that they can't get to that anymore. Also, if the application has already been submitted, there's really no purpose in clicking that button again. So, what we could say here is if the application status is submitted, we can change the text to say submitted. We can make it not clickable so that they don't change that timestamp again. And maybe change the background color a little bit to make it clear that it's not really something that you can interact with anymore. So, I'm going to fade it out just a little bit more like this. And we should have some examples that we can see right now because we do have a couple of applications that have been submitted. So, if I go to this one here, you see how I can't select that anymore. If I go to this withdraw one, I'm going to say submit it so we can see that change happening there. Withdraw, submitted, withdraw, I can go back and forth. Alright, so now let's take a look at the account settings for the user. Oh, it looks like our conditional appearance properties on our tabs have not been updated because we didn't shift the numbers up here. So, again, applications is going to respond to tab one and account is going to respond to tab two. There we go. I'll refresh the page. And this should be pretty straightforward for the applicant because they're not going to need to manage any kind of company information. So, I'm going to go open up that group, hide the applications, show the account, and let's remove this company info section altogether. I'm just going to backspace. You'll see how this just centered itself. And to be honest, this is all going to apply in the exact same way to this applicant user just like it did for the company user. We can refresh and just test things out from here just in case. You can see that I'm logged in as joey at sample. So, I see my email address and first and last name. Let's update Joey's email address. So, we'll say joeyt at sample.com or let's change it to at friends.com and because I'm changing my email address, I do have to enter my current password to continue. I'm hoping I remember the test password that I created. Let's find out. Update my information. Ooh, look, not the right password. I created this user a while ago, so I'm probably not going to be able to remember it. So, let's just make another change to joey here. Let's change his email back to what it was. But we know that our workflow is functioning properly and preventing us from making that password change. So, let's say joseph is his new first name. Update information and it has been saved there. So, that's good to go. But yeah, that copying it over from the dashboard for the company user really saved us a lot of time here because all of that works in the exact same way. But it is nice to have everything in two separate pages, one for the user type of applicant and then the other for company user because as these things grow, as your features evolve, you might introduce other things that are unique to each user type and so having them on two separate pages will make it a lot easier to manage in the long run. Alright everyone, happy building. We'll see you in the next video.