Dynamic Web Pages – OutSystems Platform Training
Articles,  Blog

Dynamic Web Pages – OutSystems Platform Training


In this lesson we’ll see how to develop dynamic web pages in Service Studio. Dynamic pages in the sense that these will be generated by the server as opposed to being statically defined by the developer as it happened actually here in the “Hello World”. This text is static and was added here by the developer. In static pages when the user requests a page, let me draw it quickly here, when the user requests a page the server will always answer with an HTML file. HMTL file. And it is always the same file that goes back as a response. With dynamic web pages, well, part of the content, and let me change color here, part of the content may be dynamically generated by the server and this actual process is called server-side render. It is the process of generating HTML that is going to be sent back to the browser as part of the response. All right? Let’s create the first page that will actually be dynamic in Service Studio. Let’s say we want something, we want a piece of text here that will tell today’s date. So let me say something like this, “Today is.” And then we will want to have the actual today’s date. All right, something like this. And we may include the time here, so you can see that this is actually dynamic. All right? This is what we’re trying to accomplish. If this was Java or .NET you would do something like this: “current date”. And it would be rendered as today’s date. In the platform, in the Agile Platform, we use an expression. An expression is a widget that you can drag and drop here from this tree on the left. Drag and drop. And an expression is a widget that is evaluated on the server-side and generates HTML text. And you will see that is all red, because you cannot have empty expressions. So this is a sign of an error inside Service Studio, we will talk about these later. And you will see the value, you will see the value property here, let me close this, sorry, select it again, you’ll see the value property here also with a red border. Let me double-click the value property, so I can actually change the expression value. And I want to use a function, a built-in function, that will return the actual date of today. And I will use the “Cur”, Ctrl-Space, “CurrDateTime”. There was a “CurrDate” there but I want to have the “Time” at the end. So let me close this and now I am able to publish and see the result. Instead of opening the browser and manually typing the URL, I will click the “Open in Browser” button here at the top. And there we have it: “Today is” and this the date and time. So if I refresh this again, and again, and again, you will see that the time kept changing. So this is the dynamic part of your content. Disregard this part of the URL right now, we will talk about that later. So let me close the browser and move on to create another expression. Something like “tomorrow will be.” And now I want to include tomorrow’s date. And tomorrow’s date is the actual, well, today’s date plus one day, right? So let me drag and drop again an expression because I want this to be calculated server-side, let me double-click the value property label again. And what we want again is to add one day to the current date. So I know I have one function, one built-in function called “AddDays”, Ctrl-Space, “AddDays”. This function will actually take a date and add a number days to it. So we can actually reuse a function we used before, “CurrDateTime”, Ctrl-Space again, “CurrDateTime” plus one. And this will actually add one to the current date. So let me close and publish this. All right we’re all set, open in browser, and there we go. Today’s date, today’s date plus one day. And if we refresh this, it keeps changing, all right? So we’re done here. Well you might be thinking, well how do I know, how do I guess or know, that there is this function, and that there is this function, and what are the parameters of the functions and how do they work. Now if you hit F1 at anytime in Service Studio you will be directed to the reference help manual. This is about a 1000 pages long. And the functions that we’re using are actually called built-in functions and you can find them here. So here is the “CurrDate”, for example, and it has documentation. And let’s find the “AddDays”. And it also contains a few examples. All right? And there you go. And let me close Service Studio Help and move on. And move on to another kind of expression. Let’s say I want to add two and two. So “Two plus two” equals and then I want to do this operation server-side. Let me drag and drop again the expression, double-click the value property so I can change the value of the expression, and type “two” and then “plus”, with the plus sign, “two”, close this and publish. Open. And there we have it. “Two plus two” and the number four. So how does this work in terms of page lifecycle. So you know that this value here comes from the formula, from applying the built-in function “CurrDateTime”, takes no parameters, and this one comes from applying the “AddDays” function to the “CurrDateTime” right there and then adding one to that date. And this one is actually, well this one belongs there, and this one is “two plus two”. So when the request is sent to the server and the page, the actual page is being rendered, the HTML is being generated, there’s the static text, “Hello World” and there’s like “Today is” and there is more text and more text, static. And then, let me change the color to red, to show the dynamic text, and then the “CurrDateTime” is calculated and replaced with the actual value. The same for the other function and the same for the “two plus two”, which equals four. All right? When this is done, the request, the response is generated and the user will be able to see what you’re seeing here right now. That’s it and we’re all set.

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *