The JSON Schema

The first challenge we have to solve is the JSON schema for the form. We need to be able to specify the list of fields for the form as well as the following for each field:

• type - Text or a Dropdown list

• label - The label to display for the field e.g. Your Name

• key - An internal use id for the field

• validations - A list of validations for the field e.g. required, min/max length, etc

The schema I came up with looks like this:

{
  "id": 1,
  "name": "Contact Details Form",
  "fields": [
    {
      "type": "TextBox",
      "label": "Full Name",
      "key": "fullName",
      "validations": {
        "required": true,
        "minLength": 3,
        "maxLength": 50
      }
    },
    {
      "type": "TextBox",
      "label": "Email",
      "key": "email",
      "validations": {
        "required": true,
        "email": true
      }
    },
    {
      "type": "TextBox",
      "label": "Age",
      "key": "age",
      "validations": {
        "required": false,
        "numeric": true
      }
    },
    {
      "type": "DropdownList",
      "label": "Province",
      "key": "province",
      "options": [
        "Eastern Cape",
        "Free State",
        "Gauteng",
        "KwaZulu-Natal",
        "Limpopo",
        "Mpumalanga",
        "Northern Cape",
        "North West",
        "Western Cape"
      ],
      "validations": {"required": true}
    }
  ]
}

Validation Types

Most of the properties are pretty self-explanatory, but let's take a closer look at the validations property. To keep things relatively simple, we'll only have 5 types of validations:

• required - Whether the field is required or not.

• minLength - The minimum number of characters required.

• maxLength - The maximum number of allowed characters.

• email - The field must be a valid email address.

• numeric - The field must be a valid number.

Packages

To make things a bit easier, I decided to use the flutter_form_builder package as well as its companion form_builder_validators package.

The flutter_form_builder removes a lot of the boilerplate code needed for forms and the form_builder_validators package has a nice list of pre-built validators, which is perfect for our use case.

The Flutter App

I won't bore you with the full details of creating the Flutter app, but will only focus on the key parts.

The Home Screen

The Home screen makes up the entirety of the app. It's made up of a Scaffold, whose body contains only a FutureBuilder, which is used to load the data for the form (I'm not using any state management package for this app). It also has a FloatingActionButton, which we'll use to validate and save the form. The code listing for the HomeScreen follows:

class HomeScreen extends StatefulWidget {
  final FormRepository formRepository;

  const HomeScreen({
    super.key,
    required this.formRepository,
  });

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<FormBuilderState> _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Dynamic Forms"),
      ),
      body: FutureBuilder<DynamicForm?>(
        future: widget.formRepository.loadForm(),
        builder: (BuildContext context, AsyncSnapshot<DynamicForm?> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 16),
                  Text("Loading form, please wait..."),
                ],
              ),
            );
          }
          if (snapshot.hasError) {
            return Center(
              child: Text("Something bad happened ${snapshot.error}"),
            );
          }
          if (snapshot.hasData) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: FormBuilder(
                key: _formKey,
                child: Column(
                  children: snapshot.data!.fields
                      .map(
                        (field) => DynamicFormInput(
                          field: field,
                        ),
                      )
                      .toList(),
                ),
              ),
            );
          }
          return const Center(child: Text("Form does not exist."));
        },
      ),
      floatingActionButton: FloatingActionButton(
        mini: true,
        onPressed: () {
          if (_formKey.currentState!.saveAndValidate(focusOnInvalid: false)) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                backgroundColor: Colors.green,
                duration: const Duration(seconds: 10),
                content: Text(
                  'Form successfully validated and saved. Form data: ${_formKey.currentState!.value}',
                ),
              ),
            );
          } else {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                backgroundColor: Colors.redAccent,
                content: Text('Form validation failed'),
              ),
            );
          }
        },
        child: const Icon(Icons.save),
      ),
    );
  }
}

Nothing too extreme in the code above, let's focus on the part where the data has finished loading and we have a data snapshot to work with. Note, that we're using the FormBuilder widget from the flutter_form_builder package and setting its child to a Column widget.

Now, the real action starts when we populate the Column widget's children by mapping the fields properties of the DynamicForm class to a DynamicFormInput widget.

The DynamicFormInput widget

The DynamicFormInput widget accepts a DynamicFormField object as a constructor parameter. Based on the type property of the object, we then return a different type of form element from the flutter_form_builder package. The code is relatively straightforward, but the real beauty of the flutter_form_builder is shown when we get to the validator property of its widgets. You'll notice how we check the validations property of the DynamicFormField object and then add the necessary FormBuilderValidators as needed.

The code listing for the DynamicFormInput widget follows:

class DynamicFormInput extends StatelessWidget {
  final DynamicFormField field;

  const DynamicFormInput({
    super.key,
    required this.field,
  });

  @override
  Widget build(BuildContext context) {
    switch (field.type) {
      case 'TextBox':
        return Padding(
          padding: const EdgeInsets.only(bottom: 16.0),
          child: FormBuilderTextField(
            autovalidateMode: AutovalidateMode.onUserInteraction,
            name: field.key,
            decoration: InputDecoration(labelText: field.label),
            keyboardType: _getInputType(
              field.validations.numeric,
              field.validations.email,
            ),
            validator: FormBuilderValidators.compose(
              [
                if (field.validations.required)
                  FormBuilderValidators.required(errorText: 'Required'),
                if (field.validations.email != null && field.validations.email == true)
                  FormBuilderValidators.email(errorText: "A valid email is required"),
                if (field.validations.numeric != null && field.validations.numeric == true)
                  FormBuilderValidators.numeric(errorText: "A number is required"),
                if (field.validations.minLength != null)
                  FormBuilderValidators.minLength(field.validations.minLength!),
                if (field.validations.maxLength != null)
                  FormBuilderValidators.maxLength(field.validations.maxLength!),
              ],
            ),
          ),
        );

      case 'DropdownList':
        return FormBuilderDropdown(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          name: field.key,
          decoration: InputDecoration(labelText: field.label),
          items: field.options!
              .map<DropdownMenuItem<String>>(
                (String value) => DropdownMenuItem(
                  value: value,
                  child: Text(value),
                ),
              )
              .toList(),
          validator: FormBuilderValidators.compose([
            if (field.validations.required)
              FormBuilderValidators.required(errorText: 'Please make a selection'),
          ]),
        );

      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "Field Type [${field.type}] does not exist.",
            style: const TextStyle(
              color: Colors.redAccent,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
    }
  }

  TextInputType _getInputType(bool? numeric, bool? email) {
    if (numeric != null && numeric == true) {
      return TextInputType.number;
    }
    if (email != null && email == true) {
      return TextInputType.emailAddress;
    }
    return TextInputType.text;
  }
}

The DynamicForm class

We're using the DynamicForm, DynamicFormField and DynamicFormFieldValidation classes to give us a strongly-typed way to access the form data we receive from the FormRepository. There is nothing very special about these classes, I used the json_serializable package to help with the serialization/deserialization. If that's not your cup of tea, check the other branch on the sample GitHub repo, for an example without using it.

The code for the classes follows:

import 'package:json_annotation/json_annotation.dart';

part 'dynamic_form.g.dart';

@JsonSerializable()
class DynamicForm {
  final int id;
  final String name;
  final List<DynamicFormField> fields;

  DynamicForm({
    required this.id,
    required this.name,
    required this.fields,
  });

  factory DynamicForm.fromJson(Map<String, dynamic> json) => _$DynamicFormFromJson(json);
  Map<String, dynamic> toJson() => _$DynamicFormToJson(this);
}

import 'package:json_annotation/json_annotation.dart';

import '../domain_models.dart';

part 'dynamic_form_field.g.dart';

@JsonSerializable()
class DynamicFormField {
  final String type;
  final String label;
  final String key;
  final List<String>? options;
  final DynamicFormFieldValidation validations;

  DynamicFormField({
    required this.type,
    required this.label,
    required this.key,
    required this.options,
    required this.validations,
  });

  factory DynamicFormField.fromJson(Map<String, dynamic> json) => _$DynamicFormFieldFromJson(json);

  Map<String, dynamic> toJson() => _$DynamicFormFieldToJson(this);
}

import 'package:json_annotation/json_annotation.dart';

part 'dynamic_form_field_validation.g.dart';

@JsonSerializable()
class DynamicFormFieldValidation {
  final bool required;
  final int? minLength;
  final int? maxLength;
  final bool? email;
  final bool? numeric;

  DynamicFormFieldValidation({
    required this.required,
    required this.minLength,
    required this.maxLength,
    required this.email,
    required this.numeric,
  });

  factory DynamicFormFieldValidation.fromJson(Map<String, dynamic> json) => _$DynamicFormFieldValidationFromJson(json);
  Map<String, dynamic> toJson() => _$DynamicFormFieldValidationToJson(this);
}

The FormRepository

You'll notice that the HomeScreen's FutureBuilder's future property is set to:

widget.formRepository.loadForm()

The FormRepository's loadForm method simulates loading the data from an API with a short delay and simply parses a JSON string and deserializes the JSON into a DynamicForm class and returns said object.

The full code for the FormRepository follows:

class FormRepository {

  String getJson() {
    String json = '''{
  "id": 1,
  "name": "Contact Details Form",
  "fields": [
    {
      "type": "TextBox",
      "label": "Full Name",
      "key": "fullName",
      "validations": {
        "required": true,
        "minLength": 3,
        "maxLength": 50
      }
    },
    {
      "type": "TextBox",
      "label": "Email",
      "key": "email",
      "validations": {
        "required": true,
        "email": true
      }
    },
    {
      "type": "TextBox",
      "label": "Age",
      "key": "age",
      "validations": {
        "required": false,
        "numeric": true
      }
    },
    {
      "type": "DropdownList",
      "label": "Province",
      "key": "province",
      "options": [
        "Eastern Cape",
        "Free State",
        "Gauteng",
        "KwaZulu-Natal",
        "Limpopo",
        "Mpumalanga",
        "Northern Cape",
        "North West",
        "Western Cape"
      ],
      "validations": {"required": true}
    }
  ]
}''';
    return json;
  }

  Future<DynamicForm> loadForm() async {
    // Simulate loading Time as if calling an API
    await Future.delayed(const Duration(seconds: 3));
    final dynamicForm = DynamicForm.fromJson(jsonDecode(getJson()));
    return dynamicForm;
  }
}

That is basically it when it comes to this solution, there is a lot of room for improvement and enhancement, but I think this should be a pretty good starting point. Here is a short clip of how the forms validates:

The full code for this example is available on GitHub

Thank you for reading. Until next time, keep coding!

JSON Serialization in Flutter can also take a fair amount of boilerplate code in order to work and can feel somewhat tedious and repetitive. If you're building your API using C#, you'll also duplicate the same model structure in C# in order to receive the serialized models from Flutter and vice versa.

With this in mind, and to help remove some of the slog work, I've created https://www.csharp2dart.com/.

The site provides a simple interface where you can paste your C# code and then generate it's Dart equivalent. If the site looks somewhat familiar, I did take some inspiration from https://csharp2json.io/

You'll have some control over the code that is generated by setting the following options:

a) Add @JsonSerialization() annotation This will add an import and part statement to the top of the file as well as decorate the class with the @JsonSerialization() annotation. e.g.:

b) Add toJson() method This option generates the toJson() method, which in turn will make it easy to serialize the object to JSON. The json_serializable package will generate this method for you and it can be found inside the generated *.g.dart file.

c) Add fromJson() method This method does the inverse of the toJson() method. With this method you can create a new instance of your class from JSON. As with the toJson() method json_serializable does all the code generation.

d) All fields should be nullable If you need all the fields of the Dart class to be nullable, setting this property will automatically do that for you.

e) Required constructor parameters The last option, if set, makes all the constructor parameters required.

If you want to generate more than one class at a time, it is possible. For example, the following code:

    public class Product
    {
        public int ProductId { get; set; }        
        public string Title { get; set; }        
        public string SubTitle { get; set; }        
        public bool IsActive { get; set; } = true;    
    }

    public class ProductOption 
    {        
        public string Title { get; set; }
        public double Price { get; set; }
        public int QuantityInStock { get; set; }
    }

will produce two Dart classes:

// -- product.dart --
class Product {
    int productId;
    String title;
    String subTitle;
    bool isActive;

    Product(this.productId,this.title,this.subTitle,this.isActive,);
}
// -- product_option.dart --
class ProductOption {
    String title;
    double price;
    int quantityInStock;

    ProductOption(this.title,this.price,this.quantityInStock,);
}

Please feel free to use it and if you run into any bugs or want to suggest any new feature, please create a new GitHub issue.

Thank you for reading. Until next time, keep coding!

-P

P.S. To learn more about JSON and serialization in Flutter, please see the Flutter documentation.

This is great because in many instances you'd only want to store a few additional properties for your Blob objects and still be able to query on theses properties without having to create and maintain a separate database that does this for you (or setup something like Azure Search)

Now, bear in mind this is still in Preview and the features can still change and there are also a few limitations to consider (source):

• Each blob can have up to 10 blob index tags
• Tag keys must be between one and 128 characters
• Tag values must be between zero and 256 characters
• Tag keys and values are case-sensitive
• Tag keys and values only support string data types. Any numbers, dates, times, or special characters are saved as strings
• Tag keys and values must adhere to the following naming rules:
  • Alphanumeric characters:
    • a through z (lowercase letters)
    • A through Z (uppercase letters)
    • 0 through 9 (numbers)
  • Valid special characters: space, plus, minus, period, colon, equals, underscore, forward slash (+-.:=_/)

With that said, I was excited to try this out, so in this post I'll show you how you can search your Azure Blob Storage files using Blob Index and C#.

The Console App

We'll create a simple .NET Core Console Application to upload a few files to Azure Blob Storage, with some tags and then search them. I'm not going to take you through the process of creating the Console Application, but if you get stuck on this, let me know in the comments.

After you've created the Console Application, add the [Azure.Storage.Blobs NuGet package] (https://www.nuget.org/packages/Azure.Storage.Blobs) and create a new class called StorageService. This class will have the following two methods:

1. UploadFile, which is a simple class to upload a file and associate some tags with it.
2. FindCustomerFiles, will return a list of Blob objects associated with a customer or a tag called Customer.

Uploading Azure Blob objects

The code for the UploadFile method follows:

public async Task UploadFile(string containerName, string filePath, Dictionary<string, string> tags)
{
    string fileName = Path.GetFileName(filePath);
    BlobContainerClient container = _client.GetBlobContainerClient(containerName);
    BlobClient blob = container.GetBlobClient(fileName);

    using FileStream fileStream = File.OpenRead(filePath);
    await blob.UploadAsync(fileStream, false);
    fileStream.Close();
    await blob.SetTagsAsync(tags);
}

You'll notice the method does not do anything spectacularly different than usually when uploading files to Azure Blob storage, however, take a look at the .SetTagsAsync method on the BlobClient object. This method take a Dictionary object containing all the tags we want to associate with the Blob object.

To upload files, we'll call the UploadFile method as illustrated below:

static async Task UploadFile(string filePath)
{
    string accountName = "<your-account-name>";
    string accountKey = "<your-account-key>";

    var storageService = new StorageService(accountName, accountKey);

    Dictionary<string, string> tags1 = new Dictionary<string, string>
    {
        {"customer", "Acme Inc."}, 
        {"product", "Anvil"}
    };
    await storageService.UploadFile("files", filePath, tags1);
}

The code above creates a new instance of the StorageService class and passes in the Azure Blob Storage account name and key as constructor parameters. Next, we create a new Dictionary object containing two tags called customer and product. Lastly, we upload the file to a Blob container called files. (The full code listing for the StorageService class is available at the bottom of this post.)

After uploading a few files using the UploadFile method, we should see them inside our files Blob Container, e.g.:

We're using the Microsoft Azure Storage Explorer to view these files. If you do not already have it installed, get it here.

To test whether our code worked, right-click on a file and select Edit Tags...

You should see a list of tags associated with the Blob object:

Searching for Azure Blob objects

The FindCustomerFiles method will perform a relatively simple search that will return any Blob objects in a specified container with a "customer" tag containing the supplied customer name. The code for the method follows:

public async Task<List<TaggedBlobItem>> FindCustomerFiles(string customerName, string containerName = "")
{
    var foundItems = new List<TaggedBlobItem>();
    string searchExpression = $"\"customer\"='{customerName}'";
    if (!string.IsNullOrEmpty(containerName))
        searchExpression = $"@container = '{containerName}' AND \"customer\" = '{customerName}'";

    await foreach (var page in _client.FindBlobsByTagsAsync(searchExpression).AsPages())
    {
        foundItems.AddRange(page.Values);
    }
    return foundItems;
}

The most important part of the FindCustomerFiles method is the FindBlobsByTagsAsync method on the BlobServiceClient object. It takes an ANSI SQL WHERE clause parameter and supports the following operators =, >, >=, <, <=, AND. Note that it will return ALL Blobs in the storage account that match the search expression, if you want to limit the results to a particular Blob container add @container to the search expression.

To use the FindCustomerFiles method to find all Blobs associated with customer Acme Inc. in the files Blob container, you'll use the following code:

static async Task FindFiles()
{
    string accountName = "<your-account-name>";
    string accountKey = "<your-account-key>";

    var storageService = new StorageService(accountName, accountKey);
    var files = await storageService.FindCustomerFiles(customerName: "Acme Inc.", containerName: "files");
    foreach (var file in files)
    {
        Console.WriteLine(file.BlobName);
    }
}

StorageService code listing

The full code for the StorageService class follows:

public class StorageService
{
    private readonly BlobServiceClient _client;

    public StorageService(string accountName, string accountKey)
    {
        var connectionString = $"DefaultEndpointsProtocol=https;AccountName={accountName};AccountKey={accountKey};EndpointSuffix=core.windows.net";
        _client = new BlobServiceClient(connectionString);
    }

    public async Task UploadFile(string containerName, string filePath, Dictionary<string, string> tags)
    {
        string fileName = Path.GetFileName(filePath);
        BlobContainerClient container = _client.GetBlobContainerClient(containerName);
        BlobClient blob = container.GetBlobClient(fileName);

        using FileStream fileStream = File.OpenRead(filePath);
        await blob.UploadAsync(fileStream, false);
        fileStream.Close();
        await blob.SetTagsAsync(tags);
    }

    public async Task<List<TaggedBlobItem>> FindCustomerFiles(string customerName, string containerName = "")
    {
        var foundItems = new List<TaggedBlobItem>();
        string searchExpression = $"\"customer\"='{customerName}'";
        if (!string.IsNullOrEmpty(containerName))
            searchExpression = $"@container = '{containerName}' AND \"customer\" = '{customerName}'";

        await foreach (var page in _client.FindBlobsByTagsAsync(searchExpression).AsPages())
        {
            foundItems.AddRange(page.Values);
        }
        return foundItems;
    }
}

I hope you can see the same potential for this as I can and how easy it is to add a simple and quick file search to your Azure Blob Storage solutions.

Thank you for reading! Until next time, keep coding!

In this post, we'll go through the process of using the AWS Cognito Hosted UI with your own Vue/NuxtJS site. For an idea on the final result, please take a look at the YouTube Video

Setting up an AWS Cognito user pool

We'll be using the same AWS Cognito User pool and App client that we've created in my previous post. Please refer to the instructions details therein.

Creating the Vue/Nuxt project

To create the Nuxt project, open up your preferred terminal window and enter the following command:

yarn create nuxt-app mynuxtapp

When prompted, you can select the following options:

1. Project name: mynuxtapp
2. Programming language: JavaScript
3. Package manager: Yarn
4. UI framework: Vuetify.js
5. Nuxt.js modules: Axios
6. Rendering mode: Single Page App
7. Deployment target: Static (Static/Jamstack hosting)

I've assumed you've already installed everything necessary to create Vue/Nuxt projects. If not, please refer to the NuxtJS documentation

Adding the nuxt/auth dependency

Add the nuxt/auth dependency to you project by executing the following command:

yarn add --exact @nuxtjs/auth-next

Next, in the nuxt.config.js file, add the nuxt/auth module to the modules array.

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth-next"
  ],

While we have the nuxt.config.js file open, also add the auth section as below:

  auth: {
    strategies: {
      awsCognito: {
        scheme: "oauth2",
        endpoints: {
          authorization: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/login",
          token: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/oauth2/token",
          userInfo: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/oauth2/userInfo",
          logout: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/logout"
        },
        token: {
          property: "access_token",
          type: "Bearer",
          maxAge: 3600
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: "token",
        redirectUri: "http://localhost:3000/login",
        logoutRedirectUri: "http://localhost:3000/login",
        clientId: "4jlfe2iki0ucn32uc44clmib3d",
        scope: ["email", "openid", "profile"],
        codeChallengeMethod: "S256"
      }
    }
  }

We're using the built-in OAuth2 scheme and we're calling it awsCognito. The endpoints are:

authorization This is the domain/url we've configured in AWS Cognito with /login appended. This loads the login page.

token This is the domain/url we've configured in AWS Cognito with /oauth2/token appended. This endpoint is used to get the user's tokens.

userInfo This is the domain/url we've configured in AWS Cognito with /oauth2/userInfo appended. This endpoint is used to retrieve information about the authenticated user.

logout This is the domain/url we've configured in AWS Cognito with /logout appended. Used to sign the user out.

For more detail regarding these endpoints, please refer to the Amazon Cognito user pools Auth API Reference

The rest of the auth options should be relatively self-explanatory. For this example the important config entries are:

response_type Set this to token to inform AWS Cognito that we want an access_token back.

redirectUri This value should also be added to the list of Callback URL(s) under App integration > App client settings in AWS Cognito.

clientId Is the same Client Id as configured in AWS Cognito. You'll find this under General settings > App clients

codeChallengeMethod Amazon Cognito authentication server only support S256. This value must be supplied for the nuxt/auth OAuth scheme to work or else you'll receive a "unsupported code challenge method" error.

The last change we need to make in the nuxt.config.js file is to enable the auth middleware globally. Do this by setting the router middleware, as show below:

 router: {
    middleware: ["auth"]
  }

UI Changes

Login Page We'll add a simple login page, inside the pages folder, called login.vue. The page will prompt the user to log in if they are not authenticated. I contains a simple login method that logs in using the awsCognito scheme we've configured in the previous step, the code for the method follows:

methods: {
    login() {
      this.$auth.loginWith("awsCognito");
    }
  }

The full code listing for the login page are:

<template>
  <v-row align="center" justify="center">
    <v-col cols="12" sm="8" md="4">
      <v-card class="elevation-12" v-if="loggedIn">
        <v-card-title>Logging in.</v-card-title>
        <v-card-text
          >Logging in, please wait...
          <v-progress-circular indeterminate color="green"></v-progress-circular>
        </v-card-text>
      </v-card>
      <v-card class="elevation-12" v-else>
        <v-card-title>You're not logged in</v-card-title>
        <v-card-text>Click the button to log into your account. </v-card-text>
        <v-card-actions>
          <v-btn @click="login" color="primary">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  layout: "unauthorized",
  data() {
    return {
      loggedIn: false
    };
  },
  created() {
    this.loggedIn = this.$auth.strategy.token.get();
  },
  methods: {
    login() {
      this.$auth.loginWith("awsCognito");
    }
  }
};
</script>

In the page template we use v-if and v-else directives to either show a login button or a message informing the user that they are being logged in. This is useful when AWS Cognito redirects to the login page after the user has logged in.

Home Page The home page is located in the pages/index.vue file. This file should've been automatically added for you when you've created the project. This page will only be shown once the user is authenticated and will display some of the user's information as illustrated in the following image:

There is not much logic in the page. The most important aspects is that we show the user information using properties on the this.$auth.user object and the logOut method uses this.$auth.logout() to log the user out when the "Log Out" button is clicked.

The full code listing for the page follows:

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <div class="text-center">
        <logo />
        <vuetify-logo />
      </div>
      <v-card>
        <v-card-title class="headline"> Welcome {{ username }}, you are logged in! </v-card-title>
        <v-card-text>
          <p>
            Here are your user details, retrieved from the
            <a href="https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html">/USERINFO</a>
            endpoint:
          </p>
          <template>
            <v-simple-table>
              <template v-slot:default>
                <thead>
                  <tr>
                    <th class="text-left">
                      Property
                    </th>
                    <th class="text-left">
                      Value
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Email</td>
                    <td>{{ email }}</td>
                  </tr>
                  <tr>
                    <td>Phone number</td>
                    <td>{{ phoneNumber }}</td>
                  </tr>
                  <tr>
                    <td>UserId/sub</td>
                    <td>{{ userId }}</td>
                  </tr>
                  <tr>
                    <td>User name</td>
                    <td>{{ username }}</td>
                  </tr>
                  <tr>
                    <td>Access Token</td>
                    <td>{{ accessToken }}</td>
                  </tr>
                  <tr>
                    <td>Refresh Token</td>
                    <td>{{ refreshToken }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
          </template>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" @click="logOut">
            Log Out
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
import Logo from "~/components/Logo.vue";
import VuetifyLogo from "~/components/VuetifyLogo.vue";

export default {
  components: {
    Logo,
    VuetifyLogo
  },
  data() {
    return {
      email: null,
      phoneNumber: null,
      userId: null,
      username: null,
      accessToken: null,
      refreshToken: null
    };
  },
  created() {
    this.email = this.$auth.user.email;
    this.phoneNumber = this.$auth.user.phone_number;
    this.userId = this.$auth.user.sub;
    this.username = this.$auth.user.username;
    this.accessToken = this.$auth.strategy.token.get();
    this.refreshToken = this.$auth.strategy.refreshToken.get();
  },
  methods: {
    logOut() {
      this.$auth.logout();
    }
  }
};
</script>

Note: I've explicitly shown on the page that the Refresh Token's value is false. This is because that AWS Cognito only returns refresh tokens if the Authorization Code grant is used. You can read more about refresh token in the Amazon Developer docs.

If everything goes according to plan, you should see a program flow similar to the video at the top of this post. I hope this post has been informative and that it can help you get started with Vue/Nuxt and Amazon Cognito.

Thank you for reading. Until next time, keep coding!

Full source code is available on GitHub: https://github.com/Pietervdw/vuenuxt-awscognito

AWS Cognito is a user identity management solution by Amazon. It is a really easy way to add authentication to your application without having to worry about building and managing your own identity/authentication solution.

Xamarin Forms is an open-source cross-platform framework that you can use to create applications for Android, iOS and Windows.

Setting up an AWS Cognito user pool

First, we will need to create a user pool in AWS Cognito, which we'll use to create users and an App client. Head over to your AWS Cognito console and click on the "Manage User Pools" button.

Click the "Create a user pool" button, in the top-right corner of the next page. Next, enter a name for and choose the "Review defaults" option

On the next page, you can review the default options (I'll leave you to experiment with the different settings on your own) and scroll down to App clients.

Click on the "Add app client..." link and on the next page, click "Add an app client".

Next, only enter an App client name (We'll use "My Xamarin App" and keep all the options with their default values, scroll down and click "Create app client"

Click the "Return to pool details" and finally click on the "Create pool" button.

Creating a new user

Before we can log in, we first need to create a user. To do this, click on Users and groups under General settings and click the "Create user" button. Complete the form, by entering a valid email address (This will be needed shortly) and make sure to tick the Send an invitation to this new user? and Email checkboxes.

With the user created, we need to configure the App client to allow the user to sign in.

Configuring the App client

Click on App client settings under App integration. Check the Cognito User Pool checkbox and complete the Callback URL(s) and Sign out URL(s). These can be any valid web address for now, we'll change them a bit later on for use with our Xamarin app.

Next, check the Implicit grant OAuth flow and select the email, openid and profile OAuth scopes (The scopes won't be super important for this demo, but is when you integrate with your own API, etc.)

Choose a domain name

With the App client configured, you need to choose a domain name. Click on Doman name under App integration and enter any domain prefix you prefer and check if it is available by clicking on the Check availability button.

If your domain name is available, save the changes, and move onto customizing the UI for the sign-in page.

Customizing the sign-in UI

Customizing the UI is an optional step, but it is a nice way to make the UI fit in with your color scheme. Not much need to change with the default style, the only change is to add a custom logo.

Testing the sign-in UI

Save your changes and head back to App client settings where you will notice that we now have the Launch Hosted UI link at the bottom of the page:

Clicking on the Launch Hosted UI link will open the sign-in page in a separate browser tab and you should see something similar to the following:

Go ahead and sign in using the credentials for the user we have created earlier. You'll be prompted to specify a new password, remember this password as we'll use it shortly to log in via our Xamarin app.

The Xamarin Forms App

I'm not going to walk you through the process of creating the Xamarin Forms app as I'm assuming you are familiar with the process. The app will not be very complicated and will consist of only one view/page.

Prism Library

I'm a fan of Prism for my Xamarin Forms apps, and will use it for this one, but the code will still work with standard Xamarin Forms or any other MVVM framework. I'm using the Prism Template Pack to create as basic Xamarin.Forms Prism Blank App. This project template will stub out all the necessary files we need for this example.

Xamarin Essentials

First, add the Xamarin.Essentials NuGet Package to your projects. If you're using MVVM (Like we're doing in this example), you'll ideally want to install the Xamarin.Essentials.Interfaces NuGet Package

Android Project Changes

In the Android project, add a new class called WebAuthenticationCallbackActivity and add the following code to it:

using Android.App;
using Android.Content.PM;

namespace XFCognito.Droid
{
    [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop)]
    [IntentFilter(new[] {Android.Content.Intent.ActionView},
        Categories = new[] {Android.Content.Intent.CategoryDefault, Android.Content.Intent.CategoryBrowsable},
        DataScheme = "myxfcognitoapp")]
    public class WebAuthenticationCallbackActivity
        : Xamarin.Essentials.WebAuthenticatorCallbackActivity
    {

    }
}

Make note of the DataScheme value, myxfcognitoapp, we are going to need this later.

AndroidManifest.xml If you're targeting Android 11, you'll need to add the following to AndroidManifest.xml:

<queries>
  <intent>
    <action android:name="android.support.customtabs.action.CustomTabsService" />
  </intent>
</queries>

iOS Project Changes

Info.plist In your iOS project add the following to Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myxfcognitoapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myxfcognitoapp</string>
    </array>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
  </dict>
</array>

Note that we're using the same value(myxfcognitoapp), that we've used for the DataScheme value in Android for CFBundleURLName and CFBundleURLSchemes.

AppDelegate.cs Override the OpenUrl and ContinueUserActivity methods in the AppDelegate class with the following:

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    if (Xamarin.Essentials.Platform.OpenUrl(app, url, options))
        return true;

    return base.OpenUrl(app, url, options);
}

public override bool ContinueUserActivity(UIApplication application, NSUserActivity userActivity, 
    UIApplicationRestorationHandler completionHandler)
{
    if (Xamarin.Essentials.Platform.ContinueUserActivity(application, userActivity, completionHandler))
        return true;

    return base.ContinueUserActivity(application, userActivity, completionHandler);
}

The Xamarin.Essentials documentation is an excellent resource if you need more information on how the Web Authenticator works. I can highly recommend it.

Shared Project Changes

App.xaml.cs Open the App.xaml.cs file and change the RegisterTypes method to the following:

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterSingleton<IWebAuthenticator, WebAuthenticatorImplementation>();

    containerRegistry.RegisterForNavigation<NavigationPage>();
    containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
}

All we're doing is registering the WebAuthenticator so that we can inject it into our ViewModel and setting up the Prism navigation.

MainPageViewModel.cs Next, open the MainPageViewModel.cs class in the ViewModels folder. Change the code to the following:

using Prism.Commands;
using Prism.Navigation;
using System;
using System.Threading.Tasks;
using Xamarin.Essentials.Interfaces;

namespace XFCognito.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        private readonly IWebAuthenticator _webAuthenticator;

        private string _accessToken;
        public string AccessToken
        {
            get => _accessToken;
            set => SetProperty(ref _accessToken, value);
        }

        private DelegateCommand _loginCommand;
        public DelegateCommand LoginCommand => _loginCommand ?? (_loginCommand = new DelegateCommand(ExecuteLoginCommand));

        public MainPageViewModel(INavigationService navigationService, IWebAuthenticator webAuthenticator) : base(navigationService)
        {
            _webAuthenticator = webAuthenticator;
            Title = "AWS Cognito & Xamarin Forms";
        }

        async void ExecuteLoginCommand()
        {
            try
            {
                var results = await _webAuthenticator.AuthenticateAsync(
                    new Uri("https://myxamarinapp.auth.us-east-1.amazoncognito.com/login?client_id=4jlfe2iki0ucn32uc44clmib3d&response_type=token&scope=email+openid+profile&redirect_uri=myxfcognitoapp://"),
                    new Uri("myxfcognitoapp://"));

                AccessToken = results?.AccessToken;
            }
            catch (TaskCanceledException  e)
            {
                AccessToken = "You've cancelled.";
            }
        }
    }

}

In the code above, we've created a property that will hold the AccessToken we get back from AWS Cognito, we've also added a LoginCommand that calls the Xamarin Essentials WebAuthenticator's AuthenticateAsync method.

The AuthenticateAsync method takes two parameters, the first is the URL to the AWS Hosted UI, you can get this by copying the URL that opens when clicking the Launch Hosted UI link in AWS Cognito's App client settings. The second parameter is the DataScheme value (myxfcognitoapp) that we've used previously with a colon and two forward slashes appended.

Final Changes

Go back to the App client settings in AWS Cognito and change the Callback URL(s) to the DataScheme value, in the following format:

myxfcognitoapp://

The app in action

When running the app on Android, the first view will be the MainPage.

Tapping on the Login button, you'll be taken to the AWS Cognito Hosted Login page.

After entering your credentials and signing in, the app will navigate back to the MainPage and your AccesToken will be displayed.

This AccessToken can now be used to make any authenticated API calls you need.

The experience on iOS is similar: {% youtube F1rGnHGbb4I %}

Thank you for reading. Until next time, keep coding!

Full app source code is available on GitHub: https://github.com/Pietervdw/xamarinforms-awscognito

Today, I’ll show you a way that is a little bit easier by using the Quick GitHub Package Visual Studio extension by Coalition Software.

Download the extension

Head over to the Visual Studio Marketplace and click on the big green “Download” button. This will download a .vsix file. After the file has downloaded, double-click on it to install it.

Your Project

First, you must make sure that your project is either configured to generate a NuGet Package when it builds:

You can also right-click on your project and select “Pack” from the context-menu:

Initial Setup

Next, right click on your project inside the Visual Studio Solution Explorer and click on “Create GitHub Package”

Setting the NuGet Path

If it is the first time you run the extension, you will be prompted to select the path to the nuget.exe executable:

Choose the correct path to nuget.exe and click the “Use Selected Path” button to proceed to the next step.

Adding a NuGet source

Next, you’ll be prompted to create a new NuGet source, where the package must be pushed to:

The entries are explained below:

• Name – Should be a friendly name for the package source
• Url – Is the URL to your GitHub organizations’ NuGet package index.json
• GitHub Username – This should be the username of the GitHub account you’ve created to generate the personal access token above.
• GitHub Token – This is the personal access token that you created earlier.

After you’ve completed all the necessary information, click on the “Add NuGet Source” button to proceed to the final step.

Publish your NuGet Package to GitHub Packages

After you’ve completed the necessary setup steps. You’ll be able to push your NuGet Package to GitHub Packages. The extension will automatically pick up the path to the .nupkg file.

All you need to do is to click the “Push GitHub Package” button and it will automatically push the package to your GitHub Packages. ‘

That is it, feel free to download the extension and give it a test. Any problems, please let me know.

Thank you for reading. Until next time, keep coding!

At Coalition Software we have a number of in-house libraries for a variety of tasks such as sending email, managing multi-tenant applications and utilities for working with Cosmos Db. Previously, to share these types of utility projects, you had to either include the .DLL in the repository or reference it by adding the project to your Visual Studio solution. This worked, but it does add some administrative overhead.

With GitHub packages, we’re able to publish our in-house libraries as NuGet packages and easily use in our projects.

In this quick guide, I’ll show you how to publish your own libraries as NuGet Packages to GitHub Packages.

Create an Access Token

Before you can push packages to GitHub you first need to create a Personal access token.

• Navigate to [https://github.com/](https://github.com/ "https://github.com/") and log in with your account.
• Click on your profile image and select Settings
• On your Profile settings page, click on Developer settings
• Click on Personal access tokens
• Click the Generate new token button.
• Add a note about what the token is for and make sure to tick the read:packages scope.

With the token created, we can now add a new NuGet Source.

Adding a new NuGet Source

If you want to push NuGet packages to GitHub Packages, you must create a source using the NuGet CLI. To do this, you’ll need to execute the following command in your Command Prompt:

nuget source Add -Name “[source-name]” -Source “https://nuget.pkg.github.com/[your-github-organization]/index.json” –UserName [your-github-username] –Password [your-github-access-token]
```console

Let’s take a closer look at the command parameters (marked in red) and what they mean:

*   **Name :** The Name parameter is what the source should be called, it can be anything. Ideally, you can give it a name like “Our GitHub Packages”
*   **Source :** The Source parameter should contain the url to your GitHub organizations’ NuGet package index.json. You can use the URL in the example and substitute your organization name.
*   **UserName :** This should be the username of the GitHub account you’ve created to generate the personal access token above.
*   **Password :** This is the personal access token that you created earlier.

If everything went according to plan, you should see a new Package source in Visual Studio. To check this, go to _Tools > Options… > NuGet Package Manager > Package Sources  

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280927126/x1ypCunoJ.png align="left")

Set a NuGet ApiKey
==================

Although not necessary, it does make thing a bit smoother if we add an API Key for the newly added NuGet Source’s URL. To do this, execute the following command:

```console
nuget setApiKey [personal-access-token] -Source [https://nuget.pkg.github.com/[your-github-organization]/index.json](https://nuget.pkg.github.com/[your-github-organization]/index.json)

Publish to GitHub Packages

To create a NuGet package for your project, you can use the nuget pack command or you can enable the “Generate NuGet package on build” option in your project properties.

After the NuGet package has been generated. You can run the following command to push it to GitHub Packages:

nuget push “E:Githubcoalition-softwareemailsrcbinReleaseCoalitionSoftware.Email.1.0.0.nupkg” -Source “Our Packages”

The first parameter should be the path to the .nupkg file that was generated by Visual Studio or the nuget pack command.

If everything worked, you should see your new package in GitHub:

Using your GitHub Package in Visual Studio

Finally, if we want to add our GitHub Package as a reference to a project in Visual Studio, we simply need to change the Package source dropdown to our newly added NuGet source:

Thank you for reading. Until next time, keep coding!

Shared Project

Start by creating a custom NavigationPage class in the shared project (Doctriod) called GradientHeaderNavigationPage. The class should inherit from the NavigationPage class.

The only thing happening in the class mentioned above is that we’re setting the navigation bar text color to white. Next, because the project uses Prism, we need to change the
RegisterTypes method in the App class (App.xaml.cs) to use our newly created GradientHeaderNavigationPage class instead of the normal Navigationpage.

Android Project

In your Android project(Doctriod.Android) create a new class called GradientHeaderNavigationPageRenderer in the Renderers folder. The class inherits from NavigationPageRenderer and there’s a lot of stuff happening this class, but the method that does the work is called SetGradientBackground which in turn is called from OnViewAdded

You can view the GradientHeaderNavigationPageRenderer.cs file in its entirety on Github

iOS Project

Our last step will be to create a new class called GradientHeaderPageRenderer in our iOS project(Doctriod.iOS) You can create the file anywhere inside the iOS project, but I like to create renderers inside the Renderers folder.

The GradientHeaderPageRenderer will inherit from PageRenderer and the method that does most of the work is called SetGradientBackground and is called from ViewWillAppear

You can view the contents of the entire file on Github.

That should do it. If all goes well you should see similar results as shown in the images at the top of this post. Additional reading and research I used to compile this post is listed below.

Thank you for reading. Until next time, keep coding!

Additional Reading

• [https://github.com/CrossGeeks/CustomNavigationBarSample](https://github.com/CrossGeeks/CustomNavigationBarSample "https://github.com/CrossGeeks/CustomNavigationBarSample")
• [https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar](https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar "https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar")
• [https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar](https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar "https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar")
• [https://github.com/vackup/StatusBarGradientBackground/](https://github.com/vackup/StatusBarGradientBackground/ "https://github.com/vackup/StatusBarGradientBackground/")

Pretty catchy title right?

The book would have detailed the steps involved in taking an app design in Adobe XD and creating a Xamarin Forms app from it. The app would’ve used Prism as its MVVM framework and the design it was going to use was called Doctriod by Jitu Raut. The design is fantastic and I urge you to use it for your apps. It does have a few challenging design aspects which was one of the reasons I chose it.

I have however decided to rather post the content of the book as a series of blog posts. There are not a lot of Xamarin Forms posts on achieving certain designs and I thought you might benefit more from a few blogs posts than from a book.

So without further ado, let’s get cracking…

Creating a Gradient Drawer Menu

The effect we’re trying to achieve is represented in the following images for Android and iOS:

Shared Project

The first step you need to take is to create a new class called GradientContentPage that inherits from ContentPage in your shared project (Mine is called Doctriod). There is not much happening in this class other than two properties:

Next, open the Master-Detail Page and add the GradientContentPage as a child element of <MasterDetailPage.Master>

Android Project

In your Android project (in my case its called Doctriod.Android) add a new file called GradientContentPageRenderer. I like to put any custom renderers into a folder called Renderers The file content should look like the following:

iOS Project

The last step is to make this work for iOS, add a new file called GradientContentPageRenderer to your iOS project (Mine is called Doctriod.iOS). Similar to the Android project, it is located in the Renderers folder.

That should just about do it. If you want to see the complete solution, I’ve open-sourced the project for the book and you can find it on Github

In today’s post, we’ll go through the steps of retrieving data from the web service and displaying it in a list view.

Since Part 1, the Prism library has had significant updates. If you’ve created the app from scratch before the Prism updates, you would need to update your NuGet packages as well as the RegisterTypes method in the App.xaml.cs, MainActivity.cs and AppDelegate.cs file in each project, to the following:

File, Open Project

We’ll continue on the code we created Part 1. You can get all the code for this series on GitHub, so go ahead and open the project you created in Part 1. We’re going to show a list of movie genres on the first page of the app. The project already contains a MainPageViewModel class which we can use, however, we’ll add our own Genre page and ViewModel by following these steps:

1. Right-click on the Views folder inside the Solution Explorer and select Add > New Item
2. Select Prism > Prism ContentPage (Xamarin.Forms), name the file GenrePage.xaml and click the Add button.

Because you’re using the Prism ContentPage item template, it will automatically create the following files for you:

• A GenrePage.xaml file with it’s associated code-behind Genre.xaml.cs and;
• A GenrePageViewModels.cs file inside the ViewModels folder, which will act as the new page’s associated view model.

It will also automatically register the newly created page for navigation by adding the following line to the
RegisterTypes method in the App.xaml.cs file:

 containerRegistry.RegisterForNavigation();

Now, since we want to display a list of movie genres when the app first opens, we need to specify that the newly added GenrePage, should be the first page that is shown. To do this open App.xaml.cs and change the following line:

         await NavigationService.NavigateAsync("NavigationPage/MainPage");

to

         await NavigationService.NavigateAsync("NavigationPage/GenrePage");

Loading Data

Next, we need to fetch a list of movie genres from The Movie DB API and populate a list view on the Genre page. First, we need to make a small change to the ViewModelBase class by doing the following:

1. Open the ViewModelBase.cs file in the ViewModels folder.
2. Add a new property called IsBusy to the ViewModelBase class. You can use the Prism propp snippet to make this easier. The property should look like:

If you want to learn more about the available Prism snippets, be sure to read my post, Prism Library Quick Tip – Snippets

Next, we need to work on the view model for the Genre page.

1. Open the GenrePageViewModel.cs file inside the ViewModels folder.
2. Change the class to inherit from ViewModelBase and add a constructor with two parameters, one of type INavigationService and another IMovieRepository:
3. Add an ObservableCollection property, called Genres, that will contain a list of genres to the class:
4. Next, add a new DelegateCommand, which will be used to retrieve the genre data, called LoadGenresCommand. Use the cmd snippet to generate most of the code for you.
5. Change the LoadGenres() method to the following (The ToObservableCollection method is an extension method in the ListExtensions class inside the Extensions folder):
6. Next, add the following line to the class constructor in order to execute the LoadGenres command:

     LoadGenresCommand.Execute();

1. Lastly, to register the required dependencies, add the following to the RegisterTypes method in the App.xaml.cs class:

Creating the UI

At this point, we have all the necessary code in place, we just need to create the UI to list the genres. We’ll create a simple UI to start with, that will only list the available movie genres, by completing the following steps:

1. Open the GenrePage.xaml file inside the View folder
2. Replace the content of the GenrePage.xaml with the following:

In the code above, we bind the page title to the view model’s Title property, as well as bind the list view to the Genres property. Note, that we also bind IsRefreshing to our view models’ IsBusy property – this will automatically show a progress indicator when the data loads.

You should now be able to see a list of genres retrieved from The Movie Db:

If you’re having problems running the example on iOS, do not panic. There are a few things we need to do to make it work that will be covered in Part 3.

In the next part, we’ll create another page showing all movies for a specific genre and the movie detail. You can find all code for this series on GitHub.

Thank you for reading. Until next time, keep coding!

Here is a quick list of each as a handy reference:

propp

Generate a property with a backing field, that depends on BindableBase. This means it will generate a standard property, but with a setter that uses the BindableBase SetProperty method, e.g.

private string fieldName;
public string PropertyName
{
    get { return fieldName; }
    set { SetProperty(ref fieldName, value); }
}

cmd

Generates a DelegateCommand property, with backing field and the associated Execute method, e.g.

private DelegateCommand _fieldName;
public DelegateCommand CommandName =>
    _fieldName ?? (_fieldName = new DelegateCommand(ExecuteCommandName));

void ExecuteCommandName()
{

}

cmdfull

Generate a DelegateCommand property, with backing field as well as its associated Execute method. It also creates the CanExecute method for you, e.g.

private DelegateCommand _fieldName;
public DelegateCommand CommandName =>
    _fieldName ?? (_fieldName = new DelegateCommand(ExecuteCommandName, CanExecuteCommandName));

void ExecuteCommandName()
{

}

bool CanExecuteCommandName()
{
    return true;
}

cmdg

Similar to the cmd snippet mentioned above, but this one generates a generic DelegateCommand property

private DelegateCommand<string> _fieldName;
public DelegateCommand<string> CommandName =>
    _fieldName ?? (_fieldName = new DelegateCommand<string>(ExecuteCommandName));

void ExecuteCommandName(string parameter)
{

}

cmdgfull

Similar to the cmdfull snippet mentioned above, but this one generates a generic DelegateCommand property with its associated Execute and CanExecute Methods

private DelegateCommand<string> _fieldName;
public DelegateCommand<string> CommandName =>
    _fieldName ?? (_fieldName = new DelegateCommand<string>(ExecuteCommandName, CanExecuteCommandName));

void ExecuteCommandName(string parameter)
{

}

bool CanExecuteCommandName(string parameter)
{
    return true;
}

These snippets are incredibly handy when working with Prism as it really makes it easy to add the code elements essential for the framework to work smoothly.

To read more about the Prism Library, visit [http://prismlibrary.com/](http://prismlibrary.com/ "http://prismlibrary.com/")

Thank you for reading. Until next time, keep coding!

I wont be delving too deep into Xamarin.Forms and Prism, instead I’ll rather focus on showing you how to use the tools at your disposal. Needless to say, if you want to learn more about Xamarin, head over to Xamarin University, they have excellent content and the instructors know their stuff. If you need more information about Prism, it is all open source and the documentation helps you get started quickly. Check it out at [http://prismlibrary.github.io/](http://prismlibrary.github.io/ "http://prismlibrary.github.io/")

Without further ado, lets get started!

File, New, Project

Our first step is to create a new project in Visual Studio. Fire up Visual Studio 2017 and select File> New > Project. In the New Project dialog window, select Prism Blank App (Xamarin.Forms). You’ll find the the project template under Visual C# > Prism.

Not seeing the template in Visual Studio? You need to install the
Prism Template Pack.

Click OK and select the platform your app will support, Android and iOS for this example. You can also select your preferred DI container. I’ve read some good things about Dryloc, so for this example we’ll use it.
Next, click Create Project.

Which container should I use? Honestly, it is down to personal preference. Prism provides an abstraction over the container, which means it isn’t tied to any specific implementation. You’ll see what I mean as we continue with the project.
You can read more about in the Prism docs.

The project wizard will generate the initial project layout for you. When finished, you should see a solution structure similar to the following:

Shared Project structure

We’ll focus mostly on the shared project (MyMovieDb) in this post. I prefer to follow the layout as detailed in Gill Cleeren’s Building an MVVM-based Architecture for Xamarin Mobile Apps Pluralsight course, which I can recommend that you watch.

First, let’s go ahead and add a few folders to help structure our code:

1. Add a new folder called Contracts
2. Add two subfolders to the Contracts folder called Repositories and Services. These two folders will contain the Interface declarations for our repository and services classes.
3. Create another two folders in the root of the MyMovieDb project, called Repositories and Services. The folders will contain the implementations of the repository and services classes.
4. And another called Models. This folder will contain any model classes.
5. Almost done. Add another folder for any custom value converters called Converters.
6. Lastly, add a folder called Extensions, which will contain any extension method classes.

The final layout of our shared project, should resemble something like the following:

Installing required NuGet packages

TMDbLib

We’ll need a way to retrieve data from The Movie DB API. Luckily, a .Net wrapper library, for said API, has already been written and is available as a NuGet package. To install it, right-click on the shared code project (MyMovieDb) and select Manage Nuget Packages… from the context-menu.

Click on Browse and enter TMDbLib in the Search box. You should see the TMDbLib by LordMike in the list of available packages. Click on the Install button on the right to install the library into your shared project.

With the wrapper library installed, we can get to work adding classes to make retrieving data easier.

AutoMapper

Next, we’ll need AutoMapper to take care of some of the heavy lifting in mapping objects. To install it, follow the steps detailed above, but this time search for the AutoMapper library:

To the code!

With the necessary references in place, let’s get down to writing some code!

1. Right click on the Models folder, and add a new class called Genre.

2. Right click on the Services subfolder in the Contracts folder, and add a new interface called IMovieService.

3. Next, right-click on the Repositories subfolder in the Contracts folder, and create a new interface called IMovieRepository.

After we’ve created the interfaces, we can now start writing the implementation for each.

1. 1. 1. Add a new class, called MovieRepository to the Repositories folder and make sure that it implements the
         IMovieRepository interface.
      2. Add a using to the TMDbLib library to your class: using TMDbLib.Client;
      3. Add a new local TMDbClient variable called _client to the MovieRepository class. Be sure to pass in your The Movie DB API Key as part
         of it’s constructor arguments :
         TMDbClient _client = new TMDbClient("---YOUR-API-KEY---");
      4. Add the following code to the GetGenres() method:

The full code listing for the MovieRepository class should look similar to the following:

1. Next, in the Services folder. Add a new class called MovieService.
2. The MovieService class should implement the IMovieService interface
3. Add a constructor for the MovieService class, that accept an IMovieService parameter
4. Add a local variable of type IMovieService called, _movieRepo to the class
5. Set the _movieRepo variable equal to the constructor parameter
6. Finally, call the _movieRepo.GetGenres() method from the GetGenres() method of the MovieService class.

The full code listing for the MovieService class follows:

Last steps

You might’ve notice we use a Mapper object to map the TmDbLib Genre object to our own Genre object (in the Models folder). This is done using the AutoMapper libary, and in order to make this work, we first need to perform the following steps:

1. Open the App.xaml file’s code-behind, App.xaml.cs

2. Add a new private method called InitAutoMapper() to the class. This method will create the mapping for the objects we need:

3. Next, call the InitAutoMapper() method inside the OnInitialized() method : InitAutoMapper();

And with that, we’re at the end of this post. In the next post, we’ll get down to business and start invoking the web service calls and display the data on the UI.

Thank you for reading! This one is for you Rodg.

Links for this post:

• GitHub repo for this blog series
• Prism Library
• The Movie Db API Developer Docs
• TMDBLib on GitHub
• AutoMapper

Before you go, the code presented in this blog post is just one approach of many. If you see a mistake or know of a better way to accomplish the tasks detailed here, please feel free to share it, in the comments section below, in a respectful and clear way. Any comments and suggestions are always appreciated.

Whilst busy with a Xamarin Forms project. I needed a quick way to surround blocks of XAML code with a region.

Yes, you can add regions to XAML code. To give you an idea of what I mean, here is a small example of a region in XAML:

So, let’s quickly go through the steps of creating a ReSharper template to surround any piece of XAML code with the correct markup for a region.

1. In Visual Studio, select ReSharper > Tools > Templates Explorer…
2. Click on the Surround Templates Tab.
3. Click the New Template toolbar button.

4. Add the following code to the template editor window:

5. Set the following properties for the template:

6. Shortcut: region

7. Description: Surrounds XAML with a region

8. Mnemonic: 2

9. Make sure the Reformat and Surrounding checkbox and radio button is selected.

10. Click on the “link” text next to availability and check the “In File matching: *.*” checkbox.
11. Set the File Mask to *.xaml
12. Lastly, check the “Show in context action” checkbox and save the template.

The final result should look like the following:

Now, when you select a piece of XAML code, you should see region inside the ReSharper “Surround with” context menu:

The result will be the code nicely wrapped inside a region, which can be collapsed to help with readability:

Thank you for reading. Until next time, keep coding!

• Account

  • Get All
  • Get
  • Save (Create and Update)
  • Delete
  • Get with System Accounts
  • Get by Category

• Customer

  • Get All
  • Get
  • Save (Create and Update)
  • Delete

• Company

  • Get Current

• Item

  • Get All
  • Get
  • Save (Create and Update)
  • Delete

• Categories (Account, Asset, Bank Account, Customer, Item, Supplier)

  • Get All
  • Get
  • Save (Create and Update) excl. Account Categories
  • Delete

• Sales Representative

  • Get All
  • Get
  • Save (Create and Update)
  • Delete
  • HasActivity

• Supplier

  • Get All
  • Get
  • Save (Create and Update)
  • Delete

• Tax Invoice

  • Get All
  • Get
  • Save (Create and Update)
  • Calculate

For example to get a list of customers on Sage One you’ll use the following C# code:

public void GetAllCustomers()
{
    var api = new ApiRequest(Username, Password, Apikey, CompanyId);
    var customers = api.CustomerRequest.Get();
}

The Sage One API is pretty neat in the fact that it support OData queries out of the box. For example to find a customer with an e-mail address, you can simply pass in a filter parameter to the Get method:

public void GetCustomerByEmail()
{
    string filter = "Email eq 'info@contoso.com'";
    var api = new ApiRequest(Username, Password, Apikey, CompanyId);
    var customers = api.CustomerRequest.Get(filter);
}

In case you’re wondering how OData queries work, take a look at the following example. The load a customer by ID, you’ll use the following:

public void GetCustomer()
{
    int customerId = 12345;
    var api = new ApiRequest(Username, Password, Apikey, CompanyId);
    var customer = api.CustomerRequest.Get(customerId);
}

In order to create a new Sage One Customer, you’ll need to create a new instance of the Customer class, as illustrated below:

public void SaveCustomer()
{
    var api = newApiRequest(Username, Password, Apikey, CompanyId);
    var customer = new Customer
    {
        Name = "Mr. David R. Robinett",
        AcceptsElectronicInvoices = true,
        Active = true,
        AutoAllocateToOldestInvoice = true,
        Balance = 0,
        ContactName = "Mr. David R. Robinett",
        DeliveryAddress01 = "Pappelallee 6667",
        DeliveryAddress02 = "Solingen",
        DeliveryAddress03 = "Nordrhein-Westfalen",
        DeliveryAddress04 = "42651",
        DeliveryAddress05 = "Germany",
        CommunicationMethod = 1,
        PostalAddress01 = "Pappelallee 6667",
        PostalAddress02 = "Solingen",
        PostalAddress03 = "Nordrhein-Westfalen",
        PostalAddress04 = "42651",
        PostalAddress05 = "Germany",
        Telephone = "238-555-0100",
        SalesRepresentativeId = null
    };
    api.CustomerRequest.Save(customer);
}

To delete a Sage One Customer, simply call the Delete method:

public void Delete()
{
    int customerId = 12345;
    var api = new ApiRequest(Username, Password, Apikey, CompanyId);
    var result = api.CustomerRequest.Delete(customerId);
}

To create a Tax Invoice:

public void CreateInvoice()
{
    var api = new ApiRequest(Username, Password, Apikey, CompanyId);
    var customerId = 0;
    var salesRepId = 0;
    var itemId = 0;
    var taxTypeId = 0;
    TaxInvoice invoice = new TaxInvoice();
    var customer = api.CustomerRequest.Get(customerId);
    var salesRep = api.SalesRepresentativeRequest.Get(salesRepId);
    // Must set both CustomerId and Customer in order to work
    invoice.CustomerId = customerId;
    invoice.Customer = customer;
    // Must set both SalesRepresentativeId and SalesRepresentative in order to work
    invoice.SalesRepresentativeId = salesRepId;
    invoice.SalesRepresentative = salesRep;
    invoice.Date = DateTime.Now;
    invoice.DueDate = new DateTime(2015, 12, 12);
    invoice.Lines = new List<CommercialDocumentLine>();
    var line1 = new CommercialDocumentLine
    {
        SelectionId = itemId, // This must be an item or account id
        TaxTypeId = taxTypeId, // Use TaxTypeRequest to get list of Tax Types
        LineType = 0, // 0=Item/1=Account
        Quantity = 1,
        UnitPriceExclusive = 390,
        UnitPriceInclusive = 390,
        DiscountPercentage = 0
    };
    invoice.Lines.Add(line1);
    var newTaxInvoice = api.TaxInvoiceRequest.Save(invoice);
}

Lots more to come. Keep watching this space!

However, I needed data that looked a bit more South African so, I’ve added some South African flavour to Faker.Net. You can now generate South African names, surnames, provinces and actual valid ID numbers for use as test data in your project.

In the following example I generate 100 client records with random South African names, surnames, provinces and ID numbers:

You can get the code on Github.

Resources used for this article:

• Create test data with NBuilder and Faker by Jerrie Pelser
• How to Generate Better Random Numbers in C# .NET by Ben Klopfer
• How to validate SA Identity Numbers by Willem Fourie
• What is a South African ID number made up of? by Robert MacLean
• The most common first names in South Africa by http://www.name-statistics.org
• The most common surnames in South Africa by http://www.name-statistics.org
• Faker.NET

This competition is now closed. Winners will be informed via e-mail. Thanks to all for commenting!

For the contest Packt have 3 copies of Bootstrap for ASP.NET MVC, to be given away to 3 lucky winners.

How you can win:

To win your copy of this book, all you need to do is come up with a comment below highlighting the reason "why you would like to win this book”.

Duration of the contest & selection of winners:

The contest is valid for a week from 16 to 24 October 2014, and is open to everyone. Winners will be selected on the basis of their comment posted.

About the book:

This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap. You will learn about various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open source plugins with Bootstrap and ASP.NET MVC and will guide you through building an ASP.NET MVC website using Bootstrap, utilizing layout and user interface components. In the process, you will also learn to build ASP.NET MVC HTML helpers and T4 templates as well as how to use the jQuery DataTables plugin. At the end of this book, you will find some valuable tips and tricks, which will help you in getting the most out of your Bootstrap and ASP.NET MVC integrated website.

Book is for ASP.NET MVC developer who would like to know how to incorporate Bootstrap into their projects. Developers with entry-level experience of ASP.NET MVC development and limited experience with Bootstrap will also benefit from this book.

Read more about the book on the Packt Publishing website.

I’m very proud and happy to announce that my book, Bootstrap for ASP.NET MVC has been published and is available for purchase.

This book guides developers on what is Bootstrap, how to include it in your project and even how to create HTML Helpers as well as T4 templates to generate Bootstrap ready Razor views.

I hope developers will find it a useful resource, and will enjoy the book as much as I enjoyed writing it.

You can purchase Bootstrap for ASP.NET MVC from the following stores:

• PACKT Publishing
• Amazon.com

This seemed like the perfect solution, however, I later found that the conversion from HTML to PDF is not perfect at all and getting your design to look the same in PDF as it does in HTML is not easy. So I found another article by Hasibul Haque, where he shows how to return a Crystal Report as PDF using ASP.Net MVC.

The Crystal Report approach works well, as your design will look perfect. The only problem I had was Hasibul’s approach returned the PDF as a download and I wanted to display it inside the browser. I combined Patrick and Hasibul’s approaches and what I came up with was a CrystalReportPdfResult

The CrystalReportPdfResult is an ASP.Net ActionResult, that return the Crystal Report as a PDF file. The result (using an iframe) looks like this inside the browser:

Creating the CrystalReportPdfResult class

To generate the result as indicated by the previous image, follow these steps:

1. Create a folder inside your ASP.Net MVC project called Pdf.
2. Add a new class to this folder called CrystalReportPdfResult.cs.
3. The new class will inherit from the ASP.Net MVC ActionResult class.

The entire code listing for the CrystalReportPdfResult class follows:

CrystalReportPdfResult.cs

public class CrystalReportPdfResult : ActionResult
{
    private readonly byte[] _contentBytes;

    public CrystalReportPdfResult(string reportPath, object dataSet)
    {
        ReportDocument reportDocument = new ReportDocument();
        reportDocument.Load(reportPath);
        reportDocument.SetDataSource(dataSet);
         _contentBytes = StreamToBytes(reportDocument.ExportToStream(ExportFormatType.PortableDocFormat));
     }

     public override void ExecuteResult(ControllerContext context)
     {

         var response = context.HttpContext.ApplicationInstance.Response;
         response.Clear();
         response.Buffer = false;
         response.ClearContent();
         response.ClearHeaders();
         response.Cache.SetCacheability(HttpCacheability.Public);
         response.ContentType = "application/pdf";

         using (var stream = new MemoryStream(_contentBytes))
         {
             stream.WriteTo(response.OutputStream);
             stream.Flush();
         }
     }

     private static byte[] StreamToBytes(Stream input)
     {
         byte[] buffer = new byte[16 * 1024];
         using (MemoryStream ms = new MemoryStream())
         {
             int read;
             while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
             {
                 ms.Write(buffer, 0, read);
             }
             return ms.ToArray();
         }
     }
 }

Creating the Crystal Report

Next, we need to create the Crystal Report that will be returned as a PDF. Do this by following these steps:

1. Create a new folder called Reports in your project.
2. Add a new Crystal Report object to the Reports folder. You can find the item template under the Reporting tab on the Add New Item dialog.
3. Design the report to your liking and save it.
4. If you need to install Crystal Reports for Visual Studio 2013, get it here.

Creating the Action that will return the PDF

Next, we need to create the actual Action on a Controller that will return the CrystalReportPdfResult, by following these steps:

1. Open your controller. In this example, we’ll use the HomeController.
2. Add a new method called Pdf that will return a CrystalReportPdfResult object.
3. Inside this method, we’ll build a list of customer that will be used as data for the report and build the path to the report filename. The code for the method follows:

public CrystalReportPdfResult Pdf()
{
    List<Customer> model = new List<Customer>();
    model.Add(new Customer { CompanyName = "Blah Inc.", ContactName = "Joe Blogs" });
    string reportPath = Path.Combine(Server.MapPath("~/Reports"), "rptCustomers.rpt");
    return new CrystalReportPdfResult(reportPath, model);
}

Creating the View

We’ll embed the PDF using an , so open a view. In this case we’ll use About.cshtml and replace it’s mark-up with the following:

About.cshtml

@{
    ViewBag.Title = "Customer Report";
}
<h2>@ViewBag.Title.</h2>
<p>This is the customer report</p>

<div class="row">
    <div class="col-md-10">
         <iframe src="@Url.Action("Pdf", "Home")" height="500" width="100%"></iframe>
     </div>
     <div class="col-md-2">
         <h3>Other page content</h3>
         <button type="button" class="btn btn-primary">Click here</button>
     </div>
 </div>

Note, that we’re using the @Url.Action helper to set the src attribute of the

In case you’re wondering how to send the Crystal Report as a PDF attachment on an email, here is the code:

Code Snippet

public void SendReport()
        {
            List<Customer> model = new List<Customer>();
            model.Add(new Customer { CompanyName = "Blah Inc.", ContactName = "Joe Blogs" });

            ReportDocument reportDocument = new ReportDocument();
            reportDocument.Load(Path.Combine(Server.MapPath("~/Reports"), "rptCustomers.rpt"));
            reportDocument.SetDataSource(model);
            using (var stream = reportDocument.ExportToStream(ExportFormatType.PortableDocFormat))
             {
                 SmtpClient smtp = new SmtpClient
                 {
                     Port = 587,
                     UseDefaultCredentials = true,
                     Host = "smtp.gmail.com",
                     EnableSsl = true
                 };

                 smtp.UseDefaultCredentials = false;
                 smtp.Credentials = new NetworkCredential("you@gmail.com", "gmailPassword");

                 var message = new System.Net.Mail.MailMessage("you@gmail.com", "recipient@gmail.com", "subject", "body");
                 message.Attachments.Add(new Attachment(stream, "report.pdf"));

                 smtp.Send(message);
             }
         }

I’ve tested this on the latest version of Chrome, Firefox and Internet Explorer and it works on all of them.

Hope this helps someone that needs something similar. Thank you for reading. Until next time, keep coding!

Download the sample project here.

If you have any comments or questions, please feel free to ask leave a comment or drop me a line on Twitter.

"Finding solace at the bottom of a bottle and comfort in the arms of harlots, my true genius lost in the annals of history", he fumed whilst arranging his tools of the trade. "Well, they will know of me, speak of me in hushed tones."

The calmness in his voice was almost reassuringly confident, a bedside manner that instilled confidence and trust. "You see my dear, the unfortunate ones are discarded by society, but I discovered their true potential. Through our many encounters I came to the realization that despite our different social standing, we all want, nay, need the same thing." he said, his voice taking on an ominous tone. "We all crave acceptance and I, I crave knowledge above all else, and knowledge of human anatomy more so."

My dear Mary Jane, even if you know me well, you did not know this."

Writers Boot camp – commit to write an post in 60 minutes every day of July 2014.

Thanks Bea!

Download the add-in here.

Note that the actual templates are free for commercial and personal use, but you’re not allowed to sell it or claim it as your own. So for the sake of complete disclosure, I did not create the templates, I only created the Outlook add-in that automatically inserts the template text into your Outlook e-mail.

How it works

The add-in adds a new “Templates for Developers and Designers” tab to the Outlook E-mail window:

Clicking on the “Insert Template” button lists all the available templates:

Clicking on the template name, automatically inserts the template into the e-mail. If the e-mail has a recipient the recipient’s name will automatically be inserted into the e-mail as well:

This functionality will work when composing a new e-mail and when replying to an existing mail.

The Templates

All the templates are stored inside your My Documents folder inside a folder called TemplatesForDevsAndDesigners.

Each template has its own folder and inside this folder the actual template called template.html. You can edit this .html file in any text editor to customize the template to your liking.

It’s as easy as that. I hope you find the add-in useful. Any comments, suggestions or bug reports, fire away in the comments or get in touch with me
on Twitter.

You can download the add-in here.