Slate Spotlight: Portal Editor

This was a triumph.

This was a triumph.

Taking a note here, huge success.

It's hard to love this state by satisfaction.

A true science.

Do you like the most?

We can.

Tiger.

Example one.

And clean up.

You just keep on trying.

Panda science cancer?

John people.

Angry.

I need to.

Even.

Kim.

Hey.

Hey everybody.

This is Jacob Madison, senior Engineering manager, technology.

And I'm Hillary Massey. I'm a learning and development specialist here at technicians as well.

So.

Hillary yeah go ahead.

Just say yeah just a couple of housekeeping points before we get into the web and our content. Just as a reminder, the web and R is being recorded so you'll have access to it within about 24 hours.

Up in the top right corner of the share screen you'll find options for closed captioning. You can set the window to full screen. There is an option now to turn off the chat box if you want to just put that away if the audio or the video ever needs to be re synced, just go ahead and give the browser your window refresh and then do pose your questions in the chat. We're going to go through some content 1st and then.

We plan to take questions at the end of the session.

The basic premise today is that we have just released a few different new features for portals and we wanted to just introduce them. I'd like to give a little shout out at this point to Justin Harville, who found the new features within minutes. I think of when we actually released them and tweeted about them, so you know some of them are not a surprise. And of course they've been available in slate for for several days now.

We got.

But we'll just go through these and I'm just going to as a reminder with all new features, we are very much asking you to come into our feedback forums, feedbackthattechnicians.com and let us know how you'd like to see these evolve how you're using them in real life. You know, we we build these things and then we expect to to continue to update them. So we definitely want to hear from you.

But then we also recognize that this is just going to be about some specific new features, but portals is pretty vast and we want to give a little bit of a plug for the base camp courses that are going to be launching on Tuesday, June 1st. So those will be available to all Festival Passholders and we really want to bring this up because there is.

The whole course, just on portals throughout the lessons in the course you go through the process of building a portal and build various organizational components and adjust the styling and things like that. So if you are interested in a deeper dive into other portal topics, definitely take a look at that and I've got the link there at the bottom as well.

OK, so to get things started we are first going to talk about page titles so the page title option is giving you the ability to add a custom HTML title tag to your portal currently or previously it would default to the name of your portal that you gave it. So this is a great way to have that internal name within Slate, but then more specific public facing title on the portal and it really is.

An important piece beyond sweet because it will show up as the title of the page when people have their in their tab or their window in the browser. If they were to bookmark the page, which we hope they do with a lot of these portals, that will be the the default name and it's also with search engines will pick up, so in those search results that is going to be the title there. So it's an important one to pay attention to.

Actually using it is really quite simple. It's edit when you're editing a portal method. You now have an option for page title and you can type in whatever you want there. A couple of little nuances for that. This the basic idea because it's on a portal method. It gives you the ability to set a custom title, not just for the portal as a whole, but for any given.

Sort of page within the portal, and so it's available on a portal method that is used using either the default branding output option or the framework and no branding.

Output option because those are the portal methods to generate what you would think of as a page, right? There are other portal methods that might generate data that gets loaded on the fly via Ajax or other portal methods that get loaded. You know that it will output a an Excel document were not. This isn't available for any of those. It's available for the ones that they create a web page, but it does allow you now if you have multiple pages within your portal to give them different titles as which might be appropriate, and I think it actually it was. That was the request that.

They drove doing this.

This new feature.

And second little feature we have added is the ability to set a custom message. If your portal is inactive at present, if your portal is inactive, you get a 503 error that says portal is inactive and you know that isn't very friendly and it doesn't give you any ability to. You know, tell the user that's hit that point what's going on. So now you can put in a custom message and.

So for example, you've taken your portal offline because you need to update something. You've taken your portal offline because there's a problem. You've taken your portal offline as you get ready for you know it's it's linked to an event that hasn't started yet. You can have now a custom message explaining what's going on, telling them you know what to do in the meantime, and so forth. One note there is that as with the current, as is true currently, if the portal is inactive and you are.

You know slate user. You can still go in so that you can test things out and so forth.

And again, this is a really simple one to put in place within your main portal page. You've got that edit button for the general portal settings in the top right corner, so if you click into that, you'll now see one of those text boxes as you Scroll down is the inactive message. It doesn't always display. So even if you've activated the portal, you can still keep that there. Have it ready to go and you do have your full editor in there, so it's often needs to include links or just.

More information for people. They are heading your portal. You don't want them to just kind of stop there. Send him off to another page where they can get more information.

Hindi.

So next is the weather widget. So there are two new widgets that you'll find in the views now and the weather widget gives you the option to display the weather on your portals. Just makes it super easy to do that. It can be single day, can be multi day and these are just some examples in. There may be a tour guide portal you want people to be able to see how there should be dressing for those tourists they plan their week or an event portal. You might just want the weather for that day. So as they check.

On the day of the event to learn more diskette directions, then they still be able to see the weather for your location.

And again, it's it's quite simple to set up. You're really just picking two things. One is you enter zip code and we use that to determine the location and so you know, as that implies, this is currently only available inside of the United States.

And then you pick how many days of the forecast you want to see. You can add multiple weather widgets if you want to do a single portal, so you might want you know the weather on campus and then the web. Maybe you have two campuses. Maybe you have an event happening in an external location and so you could display more than one.

Yeah, weather widget on a given portal.

Oh, second widget that we've added is social media. A lot of people have on their portals now, especially in status portal. Historically, we had a snippet of HTML that we'd often give folks to be able to put in a Twitter feed or a Facebook page feed. And now we're trying to make it easier.

So you can. You can configure it yourself. You can you have a lot of options for when you want it to look like it might be your schools page or admissions department page. You know whatever is is appropriate immediately. Seeing people asking for Instagram, we can look into it, but my recollection is that the options are you can embed an Instagram post a single picture, but they don't actually have the concept of embedding a feed, which is what you wanted.

Would really want my dealing, but will will continue to look into it for sure.

So this really does again make it pretty simple. Like Jacob said before, we were having to get the.

The HTML code and add that into a static content widget, but now you're having to do is add in that slug and portion of your URL for either Facebook or Twitter. Once you select the appropriate social media site option, you'll see different settings. The differences are really just based on what we're getting from the site itself, so the options that we have from Facebook or based on what we can pull in from Facebook, we have those different tabs so.

OK.

It's not, doesn't just have to be a flat feed, you can actually have tabs in there so people can go between your timeline events and messages and then with both you can adjust the sizing just depending on where you're placing that into your portal so it will be appropriate size and then what's so popular nowadays is Twitter does offer that dark mode, so if you're into the dark mode, look up your Twitter feed. You can add that in.

Out with that one there.

So historically, when you when you add a view to this is the big one by the way.

At least in terms of the amount of work on our side, they historically, when you add a new view to a portal, you could select a layout as shown in the dropdown here. Initially, when we when we first rolled out before, I guess when we first rolled out views it there was only one layout. I think the two column default layout with a big column and then a sidebar was the only one and then over time we added a few more. I think there were two rounds of adding a few more at a time and then just recently there was the request for what could we have some versions that have a footer?

In addition, and could we have you know some some additional possible layouts and at certain point we kind of said?

You know what I rather than just continue to make a zillion possible fixed layouts. Maybe we can make this more dynamic and you can set it up the way that you want, and so the intent with the layout editor is that you can add as many rows of content as you want, and then each row can have whatever layout you want, and so you can certainly build 2 columns with header 2 equal columns with header 3, equal columns with header. Any of these layouts you can build yourself.

But then you can also put a footer or you can put you know three columns and then two columns below it or you know any of these options.

So this is what we have now, so you still to get in front of it. You still have all of these same fixed options that you had before, but I will default to and will walk through a little demo of this interesting moment. When you add a new view it will default to the dynamic layout editor. So in choosing that you then get the option to put in rows so you have six rows total with different layouts and those can be added in.

In any order, or any combination that you'd like really, giving you as many possibilities as you can as you could want within your portal. So let me switch over to sharing my screen.

And will walk through a demo of this.

OK, so in your portal, if you go to add in a new view we can see that we've got that dynamic layout editor as our default. If you use the dropdown you want to use one of the existing fixed layouts. Those are still there. We're just going to use that drop down style.

Bizarre meme.

Now what we're seeing is that it is totally blank when you first come into your view, so you always do have to add in at least one row to start before you can start adding in your widgets.

So it's just as simple as either clicking on neuro I'm clicking on that will add the new road to the bottom of the portal. If you already have things in there, or you can drag and drop it in.

And once you do that, you see you are six layouts and you just click on it and now we have our structure in place.

We were at the second one in here. They just start to stock and there are drag and drop so we can reorder as you need.

Adding in some static contents.

Great exciting content in here. Once that gets plugged in, it's same idea. It's completely flexible so we can move that content into other rows. We can stack widgets within each of those columns in a row so you can add as much as you like within those different sections and move it around once things are in the Rose and you move them the Rose themselves. The content obviously stays within those columns.

So it's totally flexible. Very, very easy to use, drag and drop way.

Where's my?

We will demo of that.

Switch back over.

So we you know, for folks that already have portals that existing that want to switch over to the new layout type, we tried to make that as easy as possible on any given view, which it's just as simple as changing the layout in the dropdown. If you change it from.

A fixed layout to the dynamic layout editor. You'll get a warning saying be careful it's going to look different and then if you save it it will do on the fly. It will convert and what that means is that we try to set up the most equivalent layout to what you currently have. So if you have, you know two fixed columns with a header will add a row that is one column wide and then add another row that is 2 equal columns.

And you know that will kind of and put all of the widgets that are currently in those places into those places in the new layout. We also added the option to convert an entire portal all at once, but it seemed a little bit dangerous to do it in place, and so instead what we did is we said you could copy your portal and convert the whole thing on the fly.

When I say dangerous, the reason is just that the the way the layout works is is different in the new layout editor. If you if you're using a fixed layout, we do the layout. HTML layout is done using tables with the new layout editor we use. You know everything is a separate dev and their layout using CSS, CSS grid specifically and so the result is going to be that it might look a little bit different.

Things might not line up exactly the same way. Some of the classes and so forth that are that are there or the names of elements are going to be a little bit different, and so if you have, you know a very highly customized portal that has lots of CSS that's targeting stuff within that table layout in the new version, some of that stuff will be different, and it won't.

You know it won't look the same, and so that's why we suggest doing a copy testing the new one, tweaking it, and so forth.

And and then you know, moving forward from that point, you can. You can use the new editor. It also will work to have some views within a portal using the old layout and some using the new one. So you can sort of transition to that. That's perfectly fine.

Today it kind of addressed the question which is really about do you have to convert? We don't have any plans as of now to get rid of the fixed layoffs. You absolutely can still use them, as we've seen there. There are ways to convert over, or you know whether it's just a view or an entire portal, but we do plan to have any future development will happen on the dynamic portal layouts so.

That's really where we see the growth going and potential features or changes would happen there as opposed to with those existing fixed layouts. But again, it really is just a personal preference. There's no pressure to move over existing portals. It might be something that naturally happens overtime as you build, maybe a new portal or a new section. And if you try it out and see what you think and then give us feedback if there's a reason why you're not.

Switching over if there's something that's holding you back, please let us know because we want to be able to continue to iterate on this and make it tool that you want to use within your portals.

So one of one of the advantage I'm seeing some questions already sort of scrolling by on this. One of the advantages of the new layout is that because we're now creating multiple divisions that are laid out purely using CSS.

It gives you a lot of you know a lot of the folks that work on portals are web developers or have learned to be web developers. I've worked with some folks who are starting from scratch and really developed a lot of understanding of of CSS of HTML and JavaScript. I'm going to give a shout out to John Nordmeyer years ago we did like a whole tutorial and it was great.

OK.

But so for those folks that are web developers, you have total power. Here you can add CSS that will completely override the layout and make it do kind of whatever you want.

Each.

The the each each section of the layout has an ID. There are classes that indicated you know what the what the row layout is. The columns have different classes on them and so you could you could target them specifically.

Uhm?

Another area where that I would definitely want to talk a little bit about and actually do a little demo is the mobile view.

We, as of as sort of initial most basic version. We've rolled out a mobile version of mobile display where you know when the screen gets small enough, all of the portal widgets are just stacked and so that way you know you have things side by side, but they're getting compressed when they when they when it gets too small you will just be stacked and you know on a phone you'll be able to see all of your.

All of your stuff, but again, because it is laid out using CSS, you can override those rules and I'm going to. I'm going to do a little a little demo here of some of the things that you might be able to do.

As many of you know, because I talk about it in every webinar that I do.

My my wife and I have a good farm and so I couldn't let it go by without showing some goats. So here we have a goat portal.

Not going to try to justify like why would you want to go for it on, but this is what we have. So again by default as you shrink this eventually everything just stacks and you can see that you have. You know all of the things stacked up, so a couple of things you might want to tweak right so one is OK this you know. We have this header row and it's you know it's really important to have that that hero shot of the goats were not going to hide that but on the 2nd Rd the two goats on the side are really purely decorative. So maybe we want to say OK.

On a phone we can just skip those. Let's leave those out.

Sure, So what does that look like? So here's the editing the portal somebody I saw scrolled by somebody asked where would I add my CSS? We actually have a place right here to add it. You can just put CSS rules right in there and so I'm going to stick in.

Hello.

And I have an unanticipated problem where I can't get to my while I'm sharing the screen. I can't get to my notebook.

So this here we go got it.

Alright, so I'm adding a little bit of media.

Yes yes here.

Let's make this a little bit bigger.

Oh, remind everybody this is being recorded so you can look at this later. What we're doing here is saying OK, that second row is the 363 format that is just the way the layout works is that we have 12 even columns and then we're laying them out by saying, OK, this one. The first column is 3, you know columns wide, the middle one is 6, the outer one is is 3 and so that creates this. You know this.

Big one in the middle of two small ones on the side.

So what I'm doing in this CSS is saying that the column one and column three of that layout.

Should not be visible if the width of the of the whole portal is or the width of the screen is less than 767 pixels, which is basically like when you get down to tablet tablet size. So I'm going to save that.

So.

And now what we see is as we shrink this.

Hello.

And as we shrink this portal, we reach a point where to do the.

Well sorry, I'm gonna reload that.

The the two little pictures disappear and we just have our important good information in the middle.

So let's come back to full size and Now let's look at this last row. The last year we have a wide column in an error column and then Eric Column has a formant.

So if.

As we start shrinking at.

Next week.

The white column. You know, it's just reflowing the text. That's great, but it's certain point that little form looks terrible, right? It starts to just it doesn't work, so let's tweak that a little bit. I'm going to go back to the CSS.

And an another.

Snip.

Snippet so this snippet now is targeting that third row.

3rd Row is a 93 layout right? We have nine wide and then three wide. And what we're saying here is.

For that middle width, right where it's a little bigger than a phone when it gets to a phone, it should just stack. There's no way to do side by side at. When you get that small.

But in that middle width where it's kind of, you know less than a full size screen, but more than a phone. What we want to do is actually change the column layout so that normally this 93 column we start on column one and end on column.

Nine and and you know, and then I have the other three. We're going to change it to be even that it's six and six. And So what that's going to do is.

As the portal schrank's, I'm going to refresh her as the portal shrinks instead of the form getting all out of wack, we switch to a side by side layout and that gives us enough room to render both, so these are the kinds of things that you can override and and control.

OK.

And that was.

So a quick question that I noticed for you Jacob is that there was a question posted about the option to briefcase your group portal.

How specifically my God portal? Yeah, OK.

Yeah, probably we should add it will just add it by default into every instance. I think because it's it's so important. But yeah, we can certainly make that available.

Hey.

The people does bring us into our question, period.

So let's see.

Catching up on this, there was a question about will this custom CSS conflict with any CSS file we have in the file editor.

It's a good question. It could, of course it depends in part on.

You know This is why when you when you create a portal method that loads a particular page, you have two choices for that. One is with with branding an one is what we call framework with no brand.

And the branding. Typically the CSS that you're going to have in the file editor is going to be part of your branding, it'll be.

You know what the the code that gives the public facing parts of Slade, the look and feel of Savior website. If your portal is using that, then yeah, you could potentially have stuff that is in conflict. It's pretty unlikely because the names of the classes that we're using here are very specific, so it's not like you know we don't have a class called content that we're doing a bunch of stuff with. That's going to conflict with what you called content.

Alright, in this case it's going to be, you know, it's likely to be.

You know to not be specific to be specific enough that it's not in conflict, but it's always something to be careful about, and This is why you certainly need to test. You know what it looks like and.

Before you go live.

Nah.

What about the old Access Lt format of portals? How does this play in to those?

Yeah, unfortunately I mean it would be a very hard nut I think to try to convert out of that format. I think my recommendation.

If you're if you're using that, you know you could. Certainly there's a lot of options that exist now that didn't exist when that was first done, and so you might have, you know, lots of sort of conditional logic built into this. The XLT or JavaScript doing things that now you can do just by adding filters to views or whatever, so you might not find it so very difficult to switch over, but it is always going to be a manual process. There's not really a push button way to do that.

I I did see that there was a question about documentation, so the knowledge base articles that we have on portals have been updated with these new features, so you should see some information in there if you want to take a look and then the base camp course on portals that's launching on Tuesday will also have all of these updated features as well.

In terms of the, you know the examples of CSS overriding and stuff.

You know, I'm.

If you post in forums and community forums, I can certainly put some examples there. There maybe at some point maybe it will come up with an article, but I think a lot of the use cases are pretty specific.

And so you know in some ways, so we can give examples, but you'll ultimately have to kind of go from there.

Will these changes be across all portals, including reader dashboards?

Yes, you know to be honest, I haven't tested it in that scenario, but I don't know if a reason why it wouldn't be a problem. I, as I say or as Hillary said you don't have to switch and certainly the old stuff should start working in new stuff like it really doesn't. It doesn't kick in in any way until you make that switch, so it's not like.

The existence of the new stuff will break the old stuff. Fingers crossed, right?

But it shouldn't.

But but yeah, it will be available in in any portal that uses views.

It seems like there is some interest in this dynamic style layout being potentially in the future used in other places and sleeps.

Any any thoughts on that?

Yeah, I mean it's.

That was actually what we had in mind. To some extent. This was a trial of, you know, could we make this work in a way that was reasonable and you know and then and then roll it out in some other places. So yeah, that's definitely on our minds. We're not. We don't have any specific plans yet, and we're not building it yet. But that was always kind of the intent, yeah?

Think.

It's.

Just trying to see if we've missed any other questions in here.

Her touch.

There's a question about scaling the temperature.

I don't think we can.

For the weather widget. So maybe fudge the results, but I don't think that's going to be possible. I like that idea though.

Yeah, the data there is coming from the National Oceanic and Atmospheric Administration, so we don't really have a lot of pull over there, but.

Yeah.

Yeah, if anyone hasn't even let us know and we can, we can adjust the numbers.

Kind.

I am seeing a couple questions about.

Like changing the the layout once you know can you adjust the width of the columns and stuff like that? And the answer is at present no except for what I just showed with with CSS right? You could absolutely I mean yeah you could. Do you know I I showed it for I want to adjust the width of the columns in a certain size, but you could also do it globally and say the one you know the one that is a wide column in an error column. I don't want it to be quite so narrow I'm going to tweak it so that it's a wide column in an error column.

With a slightly different proportion, and you could certainly use CSS to do that, probably the best bet if you're you know if you're not sure how to do that, is to post in the.

Yeah, in the forums and I'll you know, I'm happy to respond to that. Give an example.

Great.

Day again.

Not seeing, I think we've we've covered the questions. Oh, and Justin just posted the link to the feedback on adding dynamic designs to deliver. So if you're interested in voting on that, we've got that link in the top 2.

Actually there are a couple more coming in when adding the checklist to have an option to view.

Properly in a mobile view.

OK, I haven't really tried that out, but if it's if it's not in feedback, please let us know.

And.

You know, and we can certainly look at that. I mean, the goal is for for everything to be responsive and viewable, and in a mobile view. But in many cases those things have to be adjusted. You know, item by item so.

Yeah, there was a question about the Basecamp course, so I was actually the one working on this course and I was new to portals as of about four months ago, so I promise it is doable. We're considering it at 200 level course, but we're starting off with basics. Going through what the different parts of a portal are and we do walk through with videos and text content how to build methods, views, queries, how to tie it all together, step by step so.

You know, being comfortable with taking a risk on this if it's not your area of expertise, you know we want you to be open to trying out some HTML and CSS, but we give some good resources and things like that. A lot of code snippets that you can copy and paste along the way. So even if you are a total newbie, I would definitely still check that out.

So I'm saying a couple of questions about how Basecamp works. Basecamp is using our new learning lab platform, which is like a self directed course, so it's not a it's not a date and time you can do it starting on. I guess it's Tuesday.

Yep, to the rainforest.

You can do it on your own schedule an I would say you know to me I would say yes. It's a slightly, you know it's a fast paced course, but you can do it at your own pace. So do the beginning a couple times until you have it and then move on from there.

Yeah, exactly so it's it's just lessons that you're walking through. There's text content, screenshots, videos, and little quiz questions along the way. Interactive features. So it is totally self paced.

I'm seeing a few a few more questions coming through, let's see.

Anne.

Oh, and just to follow up on the base camp, it is going to be live on Tuesday, but I believe the window of time I will have to double check on this, but I believe it's going to be 60 days.

Yeah, I believe it's sort of author June.

Through the end of July, so it's just you're just gaining access on that day. It's not something where you have to show up on a particular date. You're just going to have access to all of those courses. If you're a festival passholder. So on that day they will just become available, at which point you can click in and you can take them in your own time. So plan your vacations.

Time and then come back to the courses.

Nice.

Hey question about the page name, does the custom page name apply to download query output?

Tired of downloading reporting?

( 15 XSLT.

No, although I do believe that there is a.

I don't want to make any problem. I thought there was a way to override that, but now this is specifically like web pages and the title that you know the HTML title.

Will we still need to add custom CSS to portals for mobile optimization like the Max width, 100% height auto things like that?

The only thing that we've specifically changed is is that layout. So whatever you would.

This probably wouldn't remove, you know if you were finding that necessary that you would probably still find it necessary. It's worth trying and seeing how it looks. As always, in some cases there are going to be scenarios where the fact that it was a table based layout was going to, you know, would restrict things in a way that now won't be true and that you know that might be an improvement, but we haven't added anything other than the layout part.

I see a question about the column devs have unique ideas and the answer is, yeah, absolutely.

She wanted to make one column of the 93 class fullwidth. Yes, you could, that's kind of you know what I was trying to show but alright related to what to my example. So yeah definitely.

And to follow up on that, do the ideas change of those columns move around in the editor?

See.

No, the the ideas there are two kinds of ideas. There's a unique ID for each row, and those do not change. But obviously if you move a widget from one row to another, it'll be in a window with a different ID and in a row with a different ID.

But the ideas of the rows are fixed and then the columns are, you know, have have you know column one, column, two, column three. They don't have goods on them. Rose do have good.

Hi.

K.

I don't see any other questions.

Before I forget there is a web and R after hours today at 2:00 o'clock you've got a little bit of time to grab a cup of coffee, have breather and then at 2:00 PM Eastern Time. So 20 minutes there is the faculty in slate beyond admissions, academic form, processing in the reader, so you can jump into just a little bit more web and R time this afternoon.

Right?

Alright.

Thank you everyone Will will end with a little more portal jam on our way out.

Thank you all.

Thank you for coming.