Code On Time: Workflow

Blog

Workflow

Monday, November 26, 2018Print Subscribe

Let’s say you want to prevent a user with a certain name from being able to access your app pages.

Application framework provides a centralized method of content retrieval, which makes possible creative ways of content production at runtime. You can produce a custom output for the user with the name mark no matter what page he is trying to access.

If the user with the name mark is logged in then he will be presented with the following message on any application page.

Create a code file in ~/custom folder of your app.

Enter the following definition of partial class ApplicationServices.

using System.Collections.Generic;
using System.Web;

namespace MyCompany.Services
{
    public partial class ApplicationServices 
    {
        public override void LoadContent(HttpRequest request, HttpResponse response, 
            SortedDictionary<string, string> content)
        {
            // Let the framework to load the file from the file system.
            // Typically the content will be retrieved from ~/app/pages folder.
            base.LoadContent(request, response, content);
            if (content.ContainsKey("File"))
            {
                // The framework has located a physical file, let's check the user identity.
                var identity = HttpContext.Current.User.Identity;
                if (identity.IsAuthenticated && identity.Name == "mark")
                {
                    // remove the original file to prevent any default parsing of its contents
                    content.Remove("File");
                    // simulate the result of parsing by providing Title and Content of the page.
                    content["PageTitle"] = "Mark, go away";
                    content["PageContent"] =
                        "<div data-app-role=\"page\">" +
                        "<h1>Mark has no access!</h1>" +
                        "<p>Please log out or close the browser!</p>" +
                        "</div>";
                }
            }
        }
    }
}

An authenticated user with a name other than mark will see the application pages as defined at design time.

Labels: Application Builder, Security, Tutorials, Workflow

Tuesday, September 20, 2016Print Subscribe

Wizards in Touch UI

Commonly, multiple screens are connected and the user is required to page through these forms in order to complete their task. This pattern of presentation is called the “Wizard”. Starting with release 8.5.11.0, it is possible to create wizards in Touch UI. The picture below shows an example of a Create Employee Wizard in the Northwind sample database.

Each step of the wizard contains one or more categories. If all categories belonging to a particular step are rendered invisible via the Visible When property, then that step will be hidden.

Let’s implement the wizard shown above. Start the Project Designer. In the Project Explorer window, switch to Controllers tab. Double-click on “Employees / Views / createForm1 / c1 – New Employees” category.

Make the following changes and press OK to save:

Property	Value
Header Text	General Info
Description	Enter employee general information below.
Wizard	General

Next, let’s create several new categories. Right-click on “Employees / Views / createForm1” and press “New Category”.

The second category will display in a new column alongside the previous category in the first step of the wizard.

Property	Value
Header Text	Contact Info
Description	Enter employee contact information below.
New Column	Yes
Wizard	General

The next category will have the following configuration. Note the use of curly brackets wrapping field names. These will be replaced by the value of the field at runtime.

Property	Value
Header Text	Address
Description	Enter the home address of {FirstName} {LastName} below.
Wizard	Address

The last category representing the final wizard step is configured below. Notice that the Visible When property is configured to hide the category when the Title field is equal to the value “President”.

Property	Value
Header Text	Employee Info
Description	Enter {TitleOfCourtesy} {LastName}'s employee information below.
Wizard	Employee
Visible When	$row.Title != 'President'

Any categories that do not have a “Wizard” property assigned will be displayed on every step, either above or below the wizard content, depending on the position of the category relative to the first wizard category.

Rearrange the data fields as presented in the picture below using drag & drop.

On the toolbar, press Browse to regenerate the app. Once generation is complete, navigate to the Employees page and create a new employee.

Notice that a Status Bar has automatically been defined. The “Prev” and “Next” actions have been automatically injected into the form action group. Enter some values for the fields, including specifying “President” in the Title field.

Notice that the “Employee” tab has been removed from the Status Bar. By pressing “Next”, the Address wizard step will be displayed. The field names surrounded by curly brackets have been replaced with the field values defined by the user.

Note that when using custom form templates, wizards can be defined by encapsulating each step by a container of type “wizard”, containing the attribute “data-wizard-step”. The value of the attribute will be displayed in the status bar. See a simplified example below:

<div data-container="wizard" data-wizard-step="General">
    <div data-container="collapsible" data-header-text="General Info">
        ...
    </div>
    ...
</div>
<div data-container="wizard" data-wizard-step="Address">
    ...
</div>

Labels: ASP.NET, Designer, Features, JavaScript, Touch UI, User Interface, Workflow

Thursday, June 23, 2016Print Subscribe

Source Code Version Control

Every user of a computer has experienced a situation when they really wish they could wind back time. From hardware failure losing recent work, to changes made to a file that need to be undone, this capability is necessary to ensure productivity is not lost.

Software development is no different. The most common solution to this problem is through the use of source control systems such as Git, Microsoft Team Foundation Services (TFS), or Apache Subversion (SVN). These solutions will monitor a specific set of files, and allow the user to “commit” a version of files to a repository. When necessary, the user can revert to older versions of these files. Even better, it allows the development of software projects among multiple users.

Code OnTime app generator makes it easy to use source control with your project. When the type of source control is specified, the generator will create requisite files that allow easy exchange of application files and changes made to project configuration.

Getting Started With Source Control

Let’s place our sample Northwind project under source control using Git. On the home page of the app generator, click on the project name. Select “Settings” from the Project Action screen, and then select “Source Code and UI”.

From the Source Control dropdown, select “Git”.

Press the Finish button, and then press “Generate” to generate the application. If the project folder is inspected, two files have been added to the root.

A default “.gitignore” file is added, based on the standard file created by Visual Studio, with several Code OnTime files listed at the bottom. If TFS source control was selected, a corresponding “.tfignore” file will be added.

The other file will be named “Sync.[Machine Name]-[User Name].xml”. This file holds all transactions made in the Project Designer by the current user and machine. When the application is refreshed, all “Sync.XXX.xml” files at the root of the project will be merged together and sorted by transaction timestamp. The merged file is used to create the “Controllers.Log.xml” and “Application.Log.xml”, which hold transactions that are applied to controllers and application pages, controls, and data views, respectively.

This allows work from multiple machines to be smoothly integrated, without having to deal with manually merging XML files.

Next, let’s push this project to a new repository. This process may differ based on the source control and tool used to initialize the repository.

On the home page of the app generator, select the project name and press Develop to open the project in Visual Studio.

In the Solution Explorer (typically found on the right side of the screen), right-click on the solution node and press “Add Solution to Source Control”.

In the “Choose Source Control” popup that opens, select “Git” and press OK.

If the Visual Studio Git Provider has not been used before, it will require configuring your user name and email address. Click the “Configure” link, visible at the top of the Team Explorer window, set your desired settings, and press Update.

Next, enter a commit message, and press Commit to create the first commit in your local repository. Make sure that the necessary files are included in the commit.

If the commit was successful, a message will appear at the top of the screen, stating that the commit was created. It will also prompt to sync the repository with a server. Click the “Sync” link to sync to a server.

The same screen can be reached by pressing the Home icon from any screen, and selecting “Sync” option.

Several options will be available. For this example, we will use GitHub. If you have not logged into GitHub on this computer, click the “Login” button, enter your credentials, and press “Login” again.

Select “Get Started” link under the “Publish to Github” section.

Select your account, enter a repository name, and add a description (optional). Please note that private repositories require a subscription on GitHub. If the repository is public, then anyone can find the source code on the Internet. Choose accordingly.

Press Publish to push your repo to GitHub.

Once the upload process is complete, you will be able to access your repository online.

Synchronizing Changes

Now that the repository is online, you will need to synchronize it. Suppose that several changes have been made to the web app. Pages have been shuffled around, data fields customized, models added, business rules changed. Make sure to generate the application before synchronizing any changes.

Open the project in Visual Studio, open the Team Explorer, and select “Changes”. You can also right-click on the solution and press “Commit”.

Enter a commit message, and click the dropdown next to “Commit”.

Press the “Commit” button if you wish to create a local commit, but not upload your changes to the server.

Press “Commit and Push” to upload your commit to the server.

Press “Commit and Sync” to upload your commit, and download any changes that may have been pushed to the server previously.

At this point in time, press “Commit and Push”.

When the process is complete, a message will be displayed.

Downloading a Web App From Source Control

Suppose a team member has joined your team. You will need to give your teammate access to your repository. Log into your repository server and give your team member’s account access to the repo.

For a GitHub repo, you will need to navigate to the correct webpage on the GitHub website. Select the Settings tab near the top of the screen, and switch to the “Collaborators & Teams” section. Enter your member’s screen name in the Search bar and press “Add collaborator”.

On your team member’s computer, start Visual Studio. Press “Open From Source Control…” on the Start Page if visible. Otherwise, press the green Connections icon on the Team Explorer.

Select the “Clone” link under GitHub section. Click the repository you shared with the team member, and enter the correct path. In this case, the path is “~/Documents/Code OnTime/Projects/Web Site Factory”.

Restart the app generator. If the repository has been placed in the correct location, a new project will appear in the project list.

Pulling Changes From The Server

Suppose that your team member has made some changes, and you wish to pull these changes down to your computer.

Open the project in Visual Studio. In the Team Explorer, select “Sync” button.

The Synchronization pane offers several options.

The “Fetch” button will download pending commits, but will not integrate changes.

The “Pull” button will download pending commits and perform merge operations if necessary to bring your repository in line with the server.

The “Sync” button will uploading pending commits, downloads commits from the server, and performs merge operations to integrate remote changes with your local changes.

At this time, press “Sync”. The commits made by your coworker will be downloaded and integrated.

One last step is needed. Switch back to Code OnTime app generator. Select the project name, and press “Refresh”. This will integrate synced changes into the current project.

Labels: Application Builder, ASP.NET Code Generator, Teamwork, Tutorials, Workflow