- Smart Personal Cloud

Building the My Notes Application


This tutorial is a step by step guide for building the My Notes application, which is similar to the Ez Notes application you can find on the application marketplace.


The only requirement for running this tutorial is to have a myezapp.com account. If you don't already have one, please sign up for an account. Upon signup, you will get 10,000 free usage points.


Ez Notes application is a database application. In order to create a database application, you need to first decide on the information you want to capture and how the information relates to each other (in the event that you are capturing more than one piece of information).

Although it sounds abstract it is actually fairly straightforward. For example, the My Notes application should probably capture information on notes. But what information does a note usually has? The content of the note for sure (which means we should have a nice editor for editing the content too). How about a subject? A subject will make it easy to pick the note you want from a list of notes. You may also want to keep track of when a note is created, so you can sort the notes by date and see the latest first. Now, if you want to share notes, you may want to control which note to share and whether the reader can just read the notes, or if they can modify them as well. Although there may be other data elements to capture, content, subject, date, and permissions provides a simple and useful notes application.

Let's summarize what we have discussed so far: - Notes Entity: - content : this is a required rich text field for which we will need an editor to edit the content - subject : this is a required text field. - creation time : this is a date/time field - sharing mode : this is a reference to the sharing mode entity - Sharing Mode Entity: - name : the name of the mode, this is a text that we want to select using a drop down list.


The application builder can easily build the basic functions of the Ez Notes application.

- Open Application Builder : go to your user's myezapp home page. click on the "Build Apps" icon - Choose Database Application : click on the "Create" button beside the Database Application title - Fill in Basic Application Information : - Application Id : notes - Display Name : My Notes - Source Folder : apps/notes - Create 'Notes' Entity : Click the "Add Entity" button, and fill in the below information - Name : notes - Type : Data - Display Name : Notes - Add Fields for the 'Notes' Entity

contentContentRich TextCheckedCheckedUnchecked
create_timeTime CreatedDate/Timesystem.currentTime()UncheckCheckedUnchecked
shareSharing ModeReferenceshare_modeUncheckCheckedUnchecked

- Create 'Sharing Mode' Entity : Click the "Add Entity" button - Name : share_mode - Type : Setup - Display Name : Sharing Mode - Display : name - Add Fields for the 'Sharing Mode' Entity


- When you are finished adding fields, click the Save Button to return to the application details - Finally, click the Generate Button to generate the database application.


Once the My Notes application has been generated, you can interact with it by clicking on its Application Icon in the Application Tab in your dashboard.

Any database application generated in MyEzApp.com is comprised of four activity groups - data entry: this group allows you to enter new data into the "Data" entities - setup: this group allows you to manage the "Setup" entities - browse: this group allows you to browse all the "Data" entities - report: this group shows you a printable list of the "Data" entities Each activity group lists one or more entities (as they were defined during the application setup). You can interact with an entity by clicking on it.

Data Entry

Clicking on the 'Add Note' link will open up a form allowing you to create new note.


Click on the 'Sharing Mode' link will allow you to manage the list of sharing mode.


Clicking on the 'Note' link will show you a list of existing notes. You can sort, search, modify, and delete notes


Clicking on the 'Note' link will show you the list of notes suitable for print.


The generated source code for the My Notes application is located under the folder you specified when defining the application. In the 'My Notes' example, it is in the folder 'apps/notes'

apps/notes    +-------- uninstall.ws    +-------- types    |           +-------- notes.ws    |           +-------- share_mode.ws    +-------- views    |           +-------- <generated components>    +-------- pages    |           +-------- custom.ws    |           +-------- <generated pages for the host user>     +-------- guest                +-------- <generated pages for the guest user>     

Directly under the 'apps/notes' folder, you will find the script uninstall.ws. As the name implies, if you run this script, it will remove the 'My Notes' application from your account. If you want to know what it does, just open up the script. It is pretty short and easy to understand.

Under the 'apps/notes' folder, you can also find four sub folders: - types : this folder contains the generated entity classes - notes.ws and share_mode.ws. the database application generator will generate one class per entity. If any entity contains any data, you will be able to browse the data under this folder too. - views : this folder contains the generated component. you can dig into the generated code to understand how each component works. - pages : this folder contains pages used by the host user and a special file called custom.ws - guest : this folder contains pages used by the guest user

The most important file for customizing the 'My Notes' application is the pages/custom.ws file. Most of the customization can be done in this single file.

The database application generator will also generate a file under the root folder of your user account. The name of the file is appinfo_notes.ws. This is required for displaying the icon on your account dashboard. If you uninstall the 'My Notes' application by running the uninstall.ws file, you will need to remove the appinfo_notes.ws files as well.


The sample notes application that we created as part of this tutorial is very general. Below are some ways that show you how you can tailor and customize it.

Change Application Entry Page

It is easy to change the homepage for your notes application. For example, you may want users to jump straight to the notes list. You can make changes to which page is displayed as the application home screen in custom.ws script that is in the /pages directory.

Using File Manager to open up the pages/custom.ws. Find the function homeurl and modify the entry page from '/main.ws' to '/noteslistpage.ws'. The final function looks like,

func homeurl(guest as bool) as string   if guest then     return system.getScriptFolder() + "/../guest/guest_main.ws"   else     return system.getScriptFolder() + "/noteslistpage.ws"   end end
Customizing Note List Component

Another change you may want to make is what fields show up as part of the note list component. To do something like that, you need to modify the function notes_list in the pages/custom.ws. Below is what the function looks like after the change:

func notes_list(readonly as bool, print as bool)   <noteslist readonly=readonly print=print callback=(new notes_callback())>     <field name="subject"  label='Subject' typ='string' validator=(new common.notempty())          ref_page='notespage.ws' ref_param='notes_id'/>     <field value=notesinfo.field_create_time()/>     <field value=notesinfo.field_share()/>   </noteslist> end
Note Detail Component

Finally, you may wish to customize what fields show up in the note detail page. This is handled through the Note Detail component. To customize this, you need to modify the function notes_list in the pages/custom.ws. Below is what the function looks like after the change:

func notes_detail(readonly as bool)   <notesdetail readonly=readonly callback=(new notes_callback())>     <field name="create_time"  label='Time Created' typ='date' validator=(new common.notempty()) readonly=true/>     <field name="share"  label='Sharing Mode' typ='reference' ref='share_mode' validator=(new common.notempty()) />     <field name="subject"  label='Subject' typ='string' validator=(new common.notempty()) small=false/>     <field name="content"  label='' typ='richtext' validator=(new common.notempty()) small=false />   </notesdetail> end
Create Setup Data

When we described the original functionality of the sample notes application, we mentioned permissions as a key feature. This determines who can make what changes (if any) to the note data. But when we created the application, we only defined this as a data element. We didn�t actually define any data. In order to do that, we simply need to create and run a script that will populate the notes application database. The example below is a script that you can create and run in the /pages directory, for example, that will create the necessary data elements to populate the drop-down control.

use ../types/share_mode var s = <share_mode name="Don't Share"/> s.setOid("init1") save s s = <share_mode name="Share Read Only"/> s.setOid("init2") save s s = <share_mode name="Share, Allow Update"/> s.setOid("init3") save s

You can also create the data manually using the generate script 'pages/share_modelistpage.ws'. In this case, you will need to note down the object id you will use later in the program.

Access Control

Application level access control can be done by modifying the notes_callback function in the pages/custom.ws script. Below is an example.

class notes_callback implements notesinfo.callback   func checkAccess(user as string, act as string, obj as notes) as bool     if http.request().get("hostId") == user then        return true     end          if act == "delete" or act == "add" then return false end          if obj <> null and obj.share == "init1" then       return false     end          if obj <> null and obj.share == "init2" and act <> "view" then       return false     end          return true   end   func onNew(obj as notes) as bool     return true   end   func onUpdate(obj as notes) as bool     return true   end   func onDelete(objId as string) as bool     return true   end end
Turn Off Readonly Mode for Note List Page

The generated database application will mark all components in read only mode when sharing with guest users. To allow a guest user to make changes to your notes, you need to turn off "readonly mode" in the nodes_list component. To do so, please open up the page 'guest/guest_main.ws' and change the readonly attribute of the node_list component to false.

<notes_list readonly=false/>
Add notesdetailpage.ws Page for Guest

One last customization is to create a page that allows guests to modify notes. This is not created by default. In order to accomplish this, you need to create a page (i.e., notesdetailpage.ws) in the /guest folder within the notes application directory. Below is some example code you can use to create this page in the file manager.

use /comp/ezpage use ../views/common use ../pages/custom <ezpage>   <custom.homelink guest=false/>   <custom.notes_detail/> </ezpage> func addlink()   <a class='wsa' href=(system.getScriptFolder() + "/" + system.getScriptName() + ".ws?action_notesdetail=new")>Add Note</a> end

This concludes the customization.


The 'My Notes' application that we created as part of this tutorial is very much like the Ez Notes application you can find on the application marketplace. The objective was to show you how easy it is to create a basic database application like EZ Notes. Now that you've seen how easy it is to build a database application, you can create anything you want.