Skip to main content

Build Dynamic Forms in AngularJS Directives

We wanted to build a dynamic form that has some types of elements such as text field, text area, label, date picker, combobox, file uploader, etc. Beside that, the form is dynamic because basing on the provided configuration data, it should render our expected GUI.

We conducted a  research with two options: building our own directives or using a third-party directives.

- Approach 1: using a third-party directives

 + Google keyword: "build dynamic forms directives + angular third party"

 + This idea met our idea: "http://blog.backand.com/build-dynamic-forms/", but it's not free to use.

 + This 3rd-party was possible: http://schemaform.io/

Schema form hello world app: http://plnkr.co/edit/7Oqxxl?p=info

- Approach 2: building our own directives

We chose this approach because it looks more simple than using "schema form" 3rd-party and we thought that we can confidently handle it.

Example:  http://codepen.io/cavoirom/pen/meJBxv?editors=101 | http://codepen.io/vnnvanhuong/pen/qOOROy?editors=101
Labels:

Comments

Post a Comment

Popular posts from this blog

My must-have apps for daily work

There is no doubt that cool apps can help us be more productive and enjoyable at work. For the time being, I really love the following apps which are used by me almost every day. 1. A personal Kanban In fact, a personal kanban is the most useful app for me. Why does it matter? It is not just a to-do list, but it keeps me motivated every day because it helps me be able to know what my "big picture" is. I usually set up my plans together with a path to reach them.  KanbanFlow  is my preferred tool. KanbanFlow 2. A terminal Needless to say, a terminal is a must-have app for every developer, especially the ones use macOS/Linux. Due to its importance, I love to decorate and enhance it to be super exciting with various tools such as  iTerm ,  oh-my- zsh , and  thefuck . ;) iTerm + oh-my-zsh 3. A documentation "ecosystem" As a developer, I can not remember all things that I have experimented a day. Moreover, a document is really useful for sharing an...
Post a Comment
Read more

Selenium - Override javascript functions to ignore downloading process

I have got an issue with downloading process on IE 8. This browser blocks my automatic-download functionality on my app so that I could not work with my test case any more after that. In my case, I didn't care about the file is downloaded or not, I just focus on the result after downloading process finished successfully. Therefore, I found a solution to ignore this process so that I can work normally. I use Primefaces, here is the remote command to trigger the download process <p:remoteCommand name="cmdGenerateDocument" actionListener="#{logic.onGenerateDocument}" update="xrflDocumentCreationPanel" oncomplete="clickDownloadButton();"/> The following is my test case: @Test public void shouldUpdateStep6ToWarningIfStep1IsValidAfterFinished(){ MainPage mainPage = new MainPage(); waitForLoading(mainPage.getDriver()); EmployeeDetailPage empDetailPage = new EmployeeDetailPage(); waitForLoading(empDetailPage.getDriver()); e...
Post a Comment
Read more

Tip for resolving the compile errors when importing a Maven project in Eclipse

Sometimes, I import a existing Maven project into Eclipse and I get some compile errors related to "pom.xml", "facet version of Web", and  so on. It was really frustrating me because I even cleaned, built and updated the project many times but the errors still occurred. I accidentally found the following steps to resolve this issue but honestly I still don't know why. Step 1 : Delete the project that met the compile errors in Eclipse, but don't delete it on disk. Step 2 : Open the project (by Windows Explorer if you use Windows) and remove  file/folder ".classpath", ".settings" and ".project" . Step 3 : Import the project back into Eclipse. ---^0^--- Maven is a build automation tool used primarily for Java projects. Eclipse is an integrated development environment (IDE).
Post a Comment
Read more

Changing source code at run-time with Service Locator pattern

I have a service to get some data but the result can be different basing on where the implementation is. Technically, I have two or more concrete implementation of an interface and I am able to switch using these concrete classes at run-time. That means I have a place to configure it without re-deploying the application. In order to overcome this issue, I use Service Locator design pattern and here I only care about two advantages below: Encapsulating the specific implementation, we just declare the name and don't care about the implementation of the service. Changing the implementation at run-time. Client : an object that invokes the services via Service Locator Business services : services that is used by Client.
Post a Comment
Read more