Hi there
Requirements
MashPlugIns
Pen & Paper
Inspired by this article.
My previous tutorial dealt with how one can Create a simple 'Contacts' WebPart - Part 1
In this part, I will detail the rest of the tutorial so that you have CRUD functionality on your page. Again, we are not going to write any code but just click here and there until we finish this tutorial. Just like in the previous tutorial, I will not be providing any source code with this as you can experiment yourself with this by just following the instructions.
Figure 1: Output - This is what we will create..
What is here?
Buttons
1. Save button to save our contact
2. Action button to clear the page so that we add a new contact
Navigation Bar
1. Check button - to save our contact (I have this year just to demonstrate, you can remove the btnSave or either
2. Delete button - to delete our contact
3. Back button - to go back to another page
4. Sign Off - to sign off from the webapp
Previously...
1. We created a project and had our contacts database created automatically by Pen & Paper.
2. We then created a table called Contacts and added a few fields to hold our contents
3. We created a page and using the Field Selector and the ABMControls tabs of our 'sub-page', there we specified the locations where our textboxes should be located.
4. We clicked 'Create Controls' for Pen & Paper to create the respective ABMControls for our Contacts WebApp.
5. Part 1 was closed off with us adding a Save button to our page, offsetting it with 9 points, it taking 3 wide spaces and filling the whole width of the cell.
Today...
We will create a functional page with CRUD functionality in just less than 10 minutes.
Get Set
There are a few things that we need to do to make this work. First update your current version of Pen and Paper and also copy the MashPlugIns libraries to your external folders. MashPlugIns will help you in developing ABMaterial WebApps.
After you have downloaded Pen & Paper, run it and open the Contacts project.
Once opened, click Project > Upgrade. This will ensure you are ready to run and complete this tutorial. The title bar should say Pen & Paper 4.03 or later
1. Select and Pages on the treeview
2. Click on addeditcontact
3. Click on addeditcontact.addeditcontact
4. Click the Field Properties tab on the right (we just want to make a few corrections)
Figure 2
2017-12-23 Update of Figure 2
4.1 Change the Component for the id field to ABM.GEN_TEXT and set the default value to -1.
Why? ABM.GEN_NONE is a component that does not get created on the form. We want a component that will be created but then hide it. We are setting it to -1 because we want this textbox to always have a text value of -1 in it, for control.
4.2 Click Apply.
5. Click on ABMControls tab
Figure 3
5.1 Select the FirstName field and scroll down the property bag and locate Set Focus and turn it on. Save that by clicking the Check button in the toolbar on top of the property bag.
Why? We want out txtFirstName to receive the focus on the form.
5.2 Select the btnSave button
Figure 4
5.3 Scroll down the property bag and locate, Save Content and turn it on.
Why, we are telling Pen & Paper that when this button is clicked, we want to save the contents of the page. Click the check mark to save the properties for btnSave.
6. You are almost there, now select the ABMPage tab (far left of the screen above).
Figure 5
From our last tutorial, we had already linked the Contacts table, selected the primary key.
Each time you change something in the ABMContainer, you need to re-create the controls. So click on Create Controls. This will create the necessary controls for the page.
This is what happens when you create the controls.
1. The Navigation bar receives some new buttons, save, delete, back and sign out.
2. A new action bar is added at the botton of the page so that when you click on it, you can capture new records.
Just before you click on File > Compile...
Yes, that's it, you are done, nothing else to do. First let's just ensure that everything is in order. In the tree view select the Project node, yours will be Contacts.
Figure 6
Then on the right, select the Project Theme tab..
Figure 7
It should be like this, if not, just press update it and click Save at the bottom of that tab.
Select the Project Tab, ensure Set Master Page Theme is on as we want to apply this page theme on all the page(s) we have.
Figure 8
Click Apply and your project will be saved.
Click Project > Compile in the menu and your contacts.b4j project will be opened and your favourate browser opened. When everything goes well, you should have your contacts screen up and running.
You can before you run the ABMaterial App, go through the generated addeditcontact page and study the code to understand how everything works.
Do you like this tutorial? Do you want more or have a special request?
Requirements
MashPlugIns
Pen & Paper
Inspired by this article.
My previous tutorial dealt with how one can Create a simple 'Contacts' WebPart - Part 1
In this part, I will detail the rest of the tutorial so that you have CRUD functionality on your page. Again, we are not going to write any code but just click here and there until we finish this tutorial. Just like in the previous tutorial, I will not be providing any source code with this as you can experiment yourself with this by just following the instructions.
Figure 1: Output - This is what we will create..
What is here?
Buttons
1. Save button to save our contact
2. Action button to clear the page so that we add a new contact
Navigation Bar
1. Check button - to save our contact (I have this year just to demonstrate, you can remove the btnSave or either
2. Delete button - to delete our contact
3. Back button - to go back to another page
4. Sign Off - to sign off from the webapp
Previously...
1. We created a project and had our contacts database created automatically by Pen & Paper.
2. We then created a table called Contacts and added a few fields to hold our contents
3. We created a page and using the Field Selector and the ABMControls tabs of our 'sub-page', there we specified the locations where our textboxes should be located.
4. We clicked 'Create Controls' for Pen & Paper to create the respective ABMControls for our Contacts WebApp.
5. Part 1 was closed off with us adding a Save button to our page, offsetting it with 9 points, it taking 3 wide spaces and filling the whole width of the cell.
Today...
We will create a functional page with CRUD functionality in just less than 10 minutes.
Get Set
There are a few things that we need to do to make this work. First update your current version of Pen and Paper and also copy the MashPlugIns libraries to your external folders. MashPlugIns will help you in developing ABMaterial WebApps.
After you have downloaded Pen & Paper, run it and open the Contacts project.
Once opened, click Project > Upgrade. This will ensure you are ready to run and complete this tutorial. The title bar should say Pen & Paper 4.03 or later
1. Select and Pages on the treeview
2. Click on addeditcontact
3. Click on addeditcontact.addeditcontact
4. Click the Field Properties tab on the right (we just want to make a few corrections)
Figure 2
2017-12-23 Update of Figure 2
4.1 Change the Component for the id field to ABM.GEN_TEXT and set the default value to -1.
Why? ABM.GEN_NONE is a component that does not get created on the form. We want a component that will be created but then hide it. We are setting it to -1 because we want this textbox to always have a text value of -1 in it, for control.
4.2 Click Apply.
5. Click on ABMControls tab
Figure 3
5.1 Select the FirstName field and scroll down the property bag and locate Set Focus and turn it on. Save that by clicking the Check button in the toolbar on top of the property bag.
Why? We want out txtFirstName to receive the focus on the form.
5.2 Select the btnSave button
Figure 4
5.3 Scroll down the property bag and locate, Save Content and turn it on.
Why, we are telling Pen & Paper that when this button is clicked, we want to save the contents of the page. Click the check mark to save the properties for btnSave.
6. You are almost there, now select the ABMPage tab (far left of the screen above).
Figure 5
From our last tutorial, we had already linked the Contacts table, selected the primary key.
Each time you change something in the ABMContainer, you need to re-create the controls. So click on Create Controls. This will create the necessary controls for the page.
This is what happens when you create the controls.
1. The Navigation bar receives some new buttons, save, delete, back and sign out.
2. A new action bar is added at the botton of the page so that when you click on it, you can capture new records.
Just before you click on File > Compile...
Yes, that's it, you are done, nothing else to do. First let's just ensure that everything is in order. In the tree view select the Project node, yours will be Contacts.
Figure 6
Then on the right, select the Project Theme tab..
Figure 7
It should be like this, if not, just press update it and click Save at the bottom of that tab.
Select the Project Tab, ensure Set Master Page Theme is on as we want to apply this page theme on all the page(s) we have.
Figure 8
Click Apply and your project will be saved.
Click Project > Compile in the menu and your contacts.b4j project will be opened and your favourate browser opened. When everything goes well, you should have your contacts screen up and running.
You can before you run the ABMaterial App, go through the generated addeditcontact page and study the code to understand how everything works.
Do you like this tutorial? Do you want more or have a special request?
Last edited:
