Tuesday, July 26, 2016

Custom SharePoint list form (HTML)

<style type="text/css">
 .ms-long
{
width:150px
}
 .ms-rtefield
{
max-height:50px;
max-width:384px;
overflow:scroll;
}
 .Table
    {
        display: table;
border-spacing:2px;


    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;

    }
    .Cell
    {
        display: table-cell;
        border: none;
        border-width: thin;
padding-top:10px;
        padding-left: 10px;
        padding-right: 10px;
width:120px;
    }
 
    div h1{
    text-align: Center;
    margin-top: -10px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    font-weight: bold;

}

div h1 span{
    background-color: white;
}
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("https://qklportal.kl.int/app/Analage/Style%20Library/Images/loading.gif") no-repeat fixed Center;
}

.labelStyle
{
width:7em;
word-wrap:break-word;
/*border: 1px solid #000000;*/
}

.sp-peoplepicker-topLevel
{

width:210px !important;
}
</style>


<div id="page" style="display:none">
  <div style="border: thin solid black;padding-bottom: 5px; margin-top: 20px;background-color:#E8E8E8">

<div class="Row">

<div class="Cell">
<H3 class="ms-standardheader">
<nobr>Title<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</div>

<div class="Cell">
<span data-displayName="Title"></span>
</div>

<div class="Cell">

<H3 class="ms-standardheader">
<div id="WorkflowStage" class="labelStyle">WorkflowStage</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="WorkflowStage"></span>
</div>




</div>
<div class="Row">

<div class="Cell">
<H3 class="ms-standardheader">
<div id="BusinessUnit" class="labelStyle">BusinessUnit</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="BusinessUnit"></span>
</div>


<div class="Cell">
<H3 class="ms-standardheader">
<div id="KLlegalEntity" class="labelStyle">KLlegalEntity</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="KLlegalEntity"></span>
</div>
</div>


<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="DocumentOwner" class="labelStyle">DocumentOwner</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="DocumentOwner"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="JobHolder" class="labelStyle">JobHolder</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="JobHolder"></span>
</div>


</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="DocumentIsValidUntil" class="labelStyle">DocumentIsValidUntil</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="DocumentIsValidUntil"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="ScrapLocation" class="labelStyle">ScrapLocation</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="ScrapLocation"></span>
</div>


</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="PassingComment" class="labelStyle">PassingComment</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="PassingComment"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="DocumentCreator" class="labelStyle">DocumentCreator</div>
</H3>

</div>

<div class="Cell">
<span data-displayName="DocumentCreator"></span>
</div>

</div>
<div style="display:none;">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="CurrentApprover" class="labelStyle">CurrentApprover</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="CurrentApprover"></span>
</div>
</div>





</div>
<!-- Scrapping Request -->
<div style="border: thin solid black; width: 100%; padding-bottom: 5px; margin-top: 20px;">
<h1>
<span>Scrapping Request</span>
</h1>

<div class="Row">


<div class="Cell">
<H3 class="ms-standardheader">
<div id="Plant" class="labelStyle">Plant</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Plant"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="Branch" class="labelStyle">Branch</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Branch"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="Number" class="labelStyle">Number</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Number"></span>
</div>
</div>
<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="Requestor" class="labelStyle">Requestor</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Requestor"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="GestelltDorf" class="labelStyle">GestelltDorf</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="GestelltDorf"></span>
</div>
</div>
<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="ProductResponsible" class="labelStyle">ProductResponsible</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="ProductResponsible"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="Disponant" class="labelStyle">Disponant</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Disponant"></span>
</div>
</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="QM" class="labelStyle">QM</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="QM"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="SegmentLeader" class="labelStyle">SegmentLeader</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="SegmentLeader"></span>
</div>
</div>


<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="MaterialNumber" class="labelStyle">MaterialNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="MaterialNumber"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="Designation" class="labelStyle">Designation</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Designation"></span>
</div>
<div class="Cell">
<H3 class="ms-standardheader">
<div id="MaterialNumberOld" class="labelStyle">MaterialNumberOld</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="MaterialNumberOld"></span>
</div>
</div>

  <div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="MatArt" class="labelStyle">MatArt</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="MatArt"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="Vorgang" class="labelStyle">Vorgang</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="Vorgang"></span>
</div>

</div>
<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="OrderNumber" class="labelStyle">OrderNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="OrderNumber"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="CompletedByAG" class="labelStyle">CompletedByAG</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="CompletedByAG"></span>
</div>
<div class="Cell">
<H3 class="ms-standardheader">
<div id="ReklaNumber" class="labelStyle">ReklaNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="ReklaNumber"></span>
</div>
</div>
  <div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="TargetStuckNumber" class="labelStyle">TargetStuckNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="TargetStuckNumber"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="PushStuckNumber" class="labelStyle">PushStuckNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="PushStuckNumber"></span>
</div>
<div class="Cell">
<H3 class="ms-standardheader">
<div id="MiscellaneousGoodStuccoNumber" class="labelStyle">MiscellaneousGoodStuccoNumber</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="MiscellaneousGoodStuccoNumber"></span>
</div>
</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="ValueInEUR" class="labelStyle">ValueInEUR</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="ValueInEUR"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="MatCommittee" class="labelStyle">MatCommittee</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="MatCommittee"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="TotalCommittee" class="labelStyle">TotalCommittee</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="TotalCommittee"></span>
</div>
</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="Fault" class="labelStyle">Fault</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="Fault"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="ErrorCause" class="labelStyle">ErrorCause</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="ErrorCause"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="OnerousCostCenter" class="labelStyle">OnerousCostCenter</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="OnerousCostCenter"></span>
</div>


</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="ScrapAttachments" class="labelStyle">ScrapAttachments</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="ScrapAttachments"></span>
</div>
                <div class="Cell">
<H3 class="ms-standardheader">
<div id="ProfitCenterContract" class="labelStyle">ProfitCenterContract</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="ProfitCenterContract"></span>
</div>
</div>

<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="Reason" class="labelStyle">Reason</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="Reason"></span>
</div>
</div>


<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="Mabname" class="labelStyle">Mabname</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="Mabname"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="ProducedByDispo" class="labelStyle">ProducedByDispo</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="ProducedByDispo"></span>
</div>




</div>

  <div class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="RecessedLineApproved" class="labelStyle">RecessedLineApproved</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="RecessedLineApproved"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="GenehmigtGough" class="labelStyle">GenehmigtGough</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="GenehmigtGough"></span>
</div>
</div>


   </div> <!-- table ends -->

<div style="border: thin solid black; width: 100%; padding-bottom: 5px; margin-top: 20px;">
<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader" style="width:10em;">
<div id="RemarksAboutCause">RemarksAboutCause</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="RemarksAboutCause"></span>
</div>


<div class="Cell">
<H3 class="ms-standardheader" style="width:10em;">
<div id="InfluenceOnAppointmentRejection">InfluenceOnAppointmentRejection</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="InfluenceOnAppointmentRejection"></span>
</div>
</div>
<div class="Row">
<div class="Cell">
<H3 class="ms-standardheader" style="width:10em;">
<div id="BookedInSAPAndScrappedAt">BookedInSAPAndScrappedAt</div>
</H3>
</div>
<div class="Cell">
<span data-displayName="BookedInSAPAndScrappedAt"></span>
</div>
</div>
</div><!--  Table ends-->
<div id="AttachmentsDiv" style="border:thin black solid;width:100%;margin-top:20px;padding-bottom:5px"><h1><span>Attachments</span></h1>
 <div class="Table">
<div class="Row">
<div class="Cell">
<span data-displayName="Attachments"></span>

</div>

</div>


 </div>
</div>
<div style="margin-top:30px;"> </div>


<div id="KLWorkflowHistory">

 <h1><span>Approval History</span></h1>
 <div id="CustomWorkflowHistorySection" class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="CustomWorkflowHistory" class="labelStyle">CustomWorkflowHistory</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="CustomWorkflowHistory"></span>
</div>
 </div>
</div><!--End of KLWorkflowHistory-->
<!-- Approver Section -->
<div id="ApproverSectionBorder" style="border: thin solid black; width: 100%; padding-bottom: 5px; margin-top: 30px;">

<h1>
<span>Approver Section</span>
</h1>

 <div id="ApproverSection" class="Row">
<div class="Cell">
<H3 class="ms-standardheader">
<div id="ApproverStatus" class="labelStyle">ApproverStatus</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="ApproverStatus"></span>
</div>

<div class="Cell">
<H3 class="ms-standardheader">
<div id="CommentsByApprover" class="labelStyle">CommentsByApprover</div>
</H3>
</div>

<div class="Cell">
<span data-displayName="CommentsByApprover"></span>
</div>
</div><!--End of ApproverSection-->
    </div><!--End of ApproverSectionBorder-->
</div> <!-- page ends -->





<head><title></title></head>

JavaScript link over here.

1 comment:

  1. New Vegas Casino and Hotel | DrmCD
    Get Las Vegas Casino and Hotel rates from the 원주 출장샵 MGM Hotel! 부천 출장샵 DrmCD 진주 출장마사지 is your premier 포천 출장마사지 travel resource for locals & visitors to 상주 출장마사지 Las Vegas. Get Las Vegas Casino and Hotel

    ReplyDelete