Tuesday, 22 April 2014

Open Div as Popup using JavaScript

Description:

Showing Popup is the inevitable one in any kind of HTML based UI. If we want to show a html/aspx page as Popup, we can achieve this by using either Window.Showmodaldialog or Window.open. But most of the time our need is just to ask some inputs like username or mail id something like that. In HTML and JavaScript based applications, a DIV element is a very powerful HTML control that can be used to achieve to any complex UI design. In this article, I am going write and explain the example to Open Div as Popup using JavaScript and CSS without JQuery.

Open Div as Popup - HTML:
 
     This is the example to ask Login credential through Div Popup. Here, we have the button control to call JavaScript function 'OpenLoginPopup' to open loginDiv as Popup, the Div control which we are going to Show as Popup and the Close button it will call the JavaScript function 'ClosePopupDiv' to close the opened Popup.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Open Div as Popup using JavaScript</title>
    <!-- Use below CSS here -->
    <!-- Use below JavaScript here -->
</head>
<body>
    <input type="button" value="Open Popup" onclick="OpenLoginPopup()" />

    <!-- Login Div to show Popup-->
    <div id="loginDiv" style="display: none">
        <label>
            User name:</label><input id="tbUser" type="text" /><br />
        <label>
            Password:</label><input id="Text1" type="password" /><br />
        <input type="button" value="Close" style="background-color: #3D72C0" onclick="ClosePopupDiv('loginDiv')" /><br />
    </div>
</body>
</html>
Open Div as Popup - JavaScript:
 
     Here, we have three JavaScript functions, OpenLoginPopup it will set popupsettings for loginDiv, ShowPopup is a general function to Show any given div as Popup, and ClosePopupDiv to close the opened Div Popup.
<script type="text/javascript">

        function OpenLoginPopup() {
            var divToOpen = "loginDiv";
            var popupSetting = { width: '250', height: '130', title: 'Login Dialog',isFixed:true };
            ShowPopup(divToOpen, popupSetting);
        }

        // Function to Show Div Popup
        function ShowPopup(divId, popupSetting) {

            var divElt = document.getElementById(divId);
            divElt.style.display = 'block';
            var element = divElt.parentElement;
            popupSetting = popupSetting || {};

            if (!popupSetting.width) { popupSetting.width = divElt.offsetWidth };
            if (!popupSetting.height) { popupSetting.height = divElt.offsetHeight };
            if (!popupSetting.title) { popupSetting.title = 'Dialog' };

            var table = document.createElement('table');
            table.setAttribute('id', 'table' + divId);table.setAttribute('cellspacing', '0');table.setAttribute('cellpadding', '0');

            var tr1 = document.createElement('tr'); tr1.className = 'PopupHeader';
            var td1 = document.createElement('td'); td1.setAttribute('style', 'width: 90%; padding: 5px;');
            var span = document.createElement('span'); span.innerHTML = popupSetting.title;
            span.setAttribute('style', 'font-size: 14px; font-weight: bold;');
            td1.appendChild(span); tr1.appendChild(td1); table.appendChild(tr1);

            var tr2 = document.createElement('tr');
            var tdDynamic = document.createElement('td');
            tdDynamic.setAttribute('align', 'center');
            tdDynamic.setAttribute('style', 'padding-top: 10px; vertical-align:top;');

            var tempElt = document.createElement('div');
            tempElt.setAttribute('id', 'tempElt' + divElt.id);
            divElt.parentElement.insertBefore(tempElt, divElt);

            tdDynamic.appendChild(divElt);
            tr2.appendChild(tdDynamic);
            table.appendChild(tr2);
            var cssText = 'display: block; border:1px solid black;  z-index:92000; background-color:white; top:50%; left:50%;';
            cssText += 'width: ' + popupSetting.width + 'px; height: ' + popupSetting.height + 'px; margin-left: -' + Math.round(popupSetting.width / 2) + 'px; margin-top: -' + Math.round(popupSetting.height / 2) + 'px;';

            if (popupSetting.isFixed === true) { cssText += 'position: fixed;';}
            else { cssText += 'position: absolute;'; }

            table.setAttribute('style', cssText);
            element.appendChild(table);

            var shadeElt = document.createElement('div');
            shadeElt.id = "ShadedBG";shadeElt.className = "ShadedBG";
            tempElt.appendChild(shadeElt);
        }

        // Function to Close Div Popup
        function ClosePopupDiv(divId) {
            var table = document.getElementById('table' + divId);
            var element = table.parentElement;
            var divElt = document.getElementById(divId);
            divElt.style.display = 'none';
            var tempElt = document.getElementById('tempElt' + divId);
            tempElt.parentElement.insertBefore(divElt, tempElt);
            table.parentElement.removeChild(table);
            table.setAttribute('style', 'display: none');
            tempElt.parentElement.removeChild(tempElt);
        }

    </script>
Show Div as Popup - CSS:
<style type="text/css">
        .PopupHeader
        {
            color: white;
            background-color: #3D72C0;
        }
        .ShadedBG
        {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 10000;
            opacity: 0.3;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            background-color: #B8C6B8;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
        }
    </style>
Output: Open Div as Popup using JavaScript

Show Div as Popup using JavaScript without JQuery


Source File: Download HTML Source

Thanks,
Morgan
Software Developer

Sunday, 20 April 2014

Create Bulk AD Users from CSV using Powershell Script

Description

   Creating new Bulk AD Users in Active Directory is one of the important task for every Administrator either for testing or for set of actual new employees. Normally you can create new AD user using ADUC console. But it is time consuming job if you want create multiple of users at the same time. To overcome this every administrator should rely on any of the script technology like VBScript and Powershell. In this article. I am going write and explain Powershell Script to Create Bulk AD Users from CSV.

Before proceed, please ensure that the Active Directory module for Windows Powershell is installed or not in your machine. It will be installed by default in Domain Controller. In client machines, you need to install it through Remote Server Administration Tools.
Use below command to check Active Directory module is installed or not:
Get-Module -Listavailable
Create Multiple AD Users from CSV using Powershell Script
If you are newbie to Powershell, don’t forget to set your Execution Policy to unrestricted or you might get an error when you try run the script. Use the below command to set your Execution Policy:
Set-ExecutionPolicy Unrestricted
Powershell Script to Create Bulk Active Directory Users from CSV

Powershell Script to Create Bulk AD Users from CSV file

   1. Consider the CSV file NewUsers.csv which contains set of New AD Users to create with the attributes Name, samAccountName and ParentOU.

Create Bulk AD Users from CSV file using Powershell Script

      Note: the value of ParentOU should be enclosed with double quote ("). like "OU=TestOU,DC=TestDomain,DC=Local" since it has the special character comma (,). because in csv file the comma (,) is the key character to split column headers. (Ex file: Download NewUsers.csv).

   2. Copy the below Powershell script and paste in Notepad file.
   3. Change the NewUsers.csv file path with your own csv file path.
   4. Change the domain name TestDomain.local into your own domain name
   5. SaveAs the Notepad file with the extension .ps1 like Create-BulkADUsers-CSV.ps1

Click to download Powershell script as file Download Create-BulkADUsers-CSV.ps1
Import-Module ActiveDirectory
Import-Csv "C:\Scripts\NewUsers.csv" | ForEach-Object {
 $userPrincinpal = $_."samAccountName" + "@TestDomain.Local"
New-ADUser -Name $_.Name `
 -Path $_."ParentOU" `
 -SamAccountName  $_."samAccountName" `
 -UserPrincipalName  $userPrincinpal `
 -AccountPassword (ConvertTo-SecureString "MyPassword123" -AsPlainText -Force) `
 -ChangePasswordAtLogon $true  `
 -Enabled $true
Add-ADGroupMember "Domain Admins" $_."samAccountName";
}
   6. Now run the Create-BulkADUsers-CSV.ps1 file in Powershell to create Bulk Active Directory users from CSV file.
PS C:\Scripts> .\Create-BulkADUsers-CSV.ps1
Create Bulk Active Directory Users from CSV Powershell Script

Note: I have placed script file in the location C:\Scripts, if you placed in any other location, you can navigate to that path using CD path command (like cd "C:\Downloads").

   7. Now you can check the newly Created AD Users though ADUC console.

Powershell Script to Create Bulk AD Users from CSV file

Add more AD Attributes to New User:

Here, we have Created Bulk AD Users from CSV with only three attributes Name, samAccountName and ParentOU by CSV input. If you want to give more attributes from CSV input, you can add that attributes into csv file and change the above Powershell script accordingly.

Example: if you want to add EmailAddress to new user, your csv file should be like below file.

Create Bulk AD Users from CSV Powershell Script

Change the Powershell script like this:
Import-Module ActiveDirectory
Import-Csv "C:\Scripts\NewUsers.csv" | ForEach-Object {
 $userPrincinpal = $_."samAccountName" + "@TestDomain.Local"
New-ADUser -Name $_.Name `
 -Path $_."ParentOU" `
 -SamAccountName  $_."samAccountName" `
 -UserPrincipalName  $userPrincinpal `
 -AccountPassword (ConvertTo-SecureString "MyPassword123" -AsPlainText -Force) `
 -ChangePasswordAtLogon $true  `
 -Enabled $true `
 -EmailAddress $_."EmailAddress"
Add-ADGroupMember "Domain Admins" $_."samAccountName";
}


Refer this technet article http://technet.microsoft.com/en-us/library/ee617253.aspx to Create Bulk AD Users with more AD attributes.

Thanks,
Morgan
Software Developer