XPages App to Web App: Part Sixteen: Spots
Now that we've set up the CRUD pages for ships and spots, it's time to put them together. When we search a ship, we'll want to be able to see the spots created for that ship. Now let's set that up.
Web
XPages App to Web App: Part Fifteen - Dialogs
When it comes to creating Ship Spots, one of the pain points I highlighted with the previous application was when a Ship Spot required creating a new Port or a new Country. This required switching to an "admin" area to open a Port form to complete and save; and if the country hasn't been created, it requires additionally switching to a County form to complete and save, before returning to the Port and back to the Ship Spot. Options were cached server-side in viewScope, so launching additional browser windows wasn't an option - the page would still need to be refreshed and entered data lost. We can improve on this.
XPages App to Web App: Part Fourteen - Fields and Save
In the last part I covered CSS Grid and its use for the layout of the Ship Spot form. In this part I'm going to cover the additional form functionality and save functionality.
XPages App to Web App: Part Thirteen - HTML Layouts
We've covered a lot of the Ship and Ship Spot basic web component JavaScript. But now it's time to dig into the HTML. But first, it's important to recap the landing page web component.
XPages App to Web App: Part Twelve - Ship Spot Component
In the last two parts we covered the ship form, but we didn't cover the HTML of the form. We'll cover that in the next part, but first we'll cover creating the class. As we do that, we'll see one of the big benefits that Web Components brings to JavaScript application development. Because here we'll start with the Ship Spot form, which not only captures data that will create or display a Ship but also creates a Spot - Location, Port From and Port To.