We're constantly evolving the user experience for Apex Designer, and we're excited to show off our latest creation - Design In Context with Live Edit. Watch the video (recorded by David Knapp) to see how this capability allows a non-technical user to create and modify UIs in their application and see changes in real time. It also shows how these changes can be synced to the main project ready for deployment.
Video Transcript
This is Dave from Apex. I'm super excited to show you our newest Apex Designer feature, design in context with live edit. The objective is to provide a more productive design experience for both technical and non-technical team members. Here is a trading activity app running in the dev environment. I can click on orders to navigate and see the details about them, what the trades are, and I can go up here to my avatar and click live edit. And that gives me access to all the individual components that make up this page. So for example, let's say that I want quantity here to be in front of price. I can simply drag it and drop it, and you see that the app on the left is instantaneously updated to reflect this change. I also notice that there's nowhere on the page that tells me what account this order is made from.
So let's go in here and add after that Flex Row, a field, and when that field is added, we can pick which item we want to connect that field to. In this case, the order's, account's name. Great. Now we see that this is in Alyssa's account, but we notice that the field label is name. Maybe that's not quite what we want. We can set an label on this one and call it "the account". Finally, the third change that I noticed that I want to make is that when an order is created, the trades take a little bit of time to be completed and the user would typically have to click the refresh button on the browser, but that's not a great user experience. Instead, why don't we put in a refresh button right next to the trade heading.
So we'll go right down here and we'll say 'add after'. We'll put in a refresh button. Now the refresh button works for two different kinds of things, either an object, like an order, or the array (or list). In this case, we want to just refresh the trades for the order. So now we have that refresh button on there, and if we want to test it, we can just click back to this so that the overlays are gone and you see that this is an active button now that is rereading the trade information for this particular order. As we've been editing, the live edit design in context has been updating the application running in memory, but it's also been pushing all of the metadata changes back to Apex Designer. We can click this button. Apex Designer will take those changes and use them to regenerate the source code of this application, build it, and reload the page.
So now everything looks good. We don't have any pending changes. Now we can flip over here. Notice first of all that the URL has 'Dave' in it. So we've been running in the development environment, but in fact, in a copy of the application that's specific to me called a branch. When we're finished with the feature work that we want to do, we can flip over to Apex Designer and compare my branch to the source of the trading activity application. And it shows me what I have changed. Sure enough, I have changed the order page, and if I expand that, I've added a field, I added a refresh button, and I did a bunch of reordering of components in the page. So I can review these changes with one of my team members and I could individually select these to merge them, or I can just pick all of them and say, 'refine the order page' and click this button that applies all of my changes to the shared central version of the application. And when my team members go and look at that, there's a change log entry in here with my name and what time it was done, as well as all of the items that were a part of that change. So now myself and my team members can continue working on features in our own branches, merging them into the central application. And in the next video we'll show you how you push that updated application into your source code control system and deploy it to the test and production environments.
