Notes for New Persons in Second Development of Pan-micro oa Process Form

1. Are the jQuery codes used on the PC and mobile devices generic?

Answer: Depending on the actual operation, the jQuery code used on the generic PC side and the mobile side is not universal, and some of the code on the PC side cannot be used in the mobile template process form.

It is very likely that when developing a mobile phone template, the phone will write a separate set of js code.

2. The generic process form contains submission checking methods for developers to redevelop, checkCustomize() methods, and only one submission checking method can be written in the same process form. Note: If there are multiple places to make a decision in a process, all of them need to be made under the checkCustomize() method. If the method returns true, they go to the next node and return Flase.Unable to submit successfully.The code used is as follows:

<!-- script Code, if referenced js File, please use and HTML In the same way. -->
<script type="text/javascript">
    jQuery(document).ready(function() {
        checkCustomize = function() { //Submit Validation
            var returnval = true;
            var beginDateTime = jQuery("#field5973").val();
            var endDateTime = jQuery("#field5974").val();
            if(beginDateTime.valueOf() > endDateTime.valueOf()) {
                Dialog.alert("Start date cannot be greater than end date");
                jQuery("#field5973").val("");
                jQuery("#field5974").val("");
                jQuery("#field5973span").html("");
                jQuery("#field5974span").html("");
                returnval = false;
            }
            return returnval;
        }
    });
</script>

3. Pan-micro systems have their own alert warning boxes defined as follows:

 Dialog.alert("Start date cannot be greater than end date");

4. In the process of developing process forms, you will encounter hidden fields and remove the fields of required checks or add required checks to a field. It is very convenient to link operations in this area with the display attributes provided in general. When a field is hidden, it will not be checked if the field is required to fill in the js implementation, so you have to consider hiding it, or the field will prompt for required checks.I have learned the codes of netizens in Baidu. The pc side is very useful, but the mobile side is not applicable, which will cause other codes to fail. The codes are referenced as follows:

//Ecology8 Secondary development: HTML Addition and Removal of Required Validation for Form Fields
/**
 * Add required validation to the field.
 */
var addInputCheckField = function(fieldId, spanImgId) {
    $('#' + fieldId).attr('viewtype', '1');
    var fieldStr = $('input[name=needcheck]').val();
    if (fieldStr.charAt(fieldStr.length - 1) != ',') {
        fieldStr += ',';
    }
    $('input[name=needcheck]').val(fieldStr + fieldId + ',');
    $('#' + spanImgId).html('<img src="/images/BacoError_wev8.gif" align="absMiddle">');
};
 
/**
 * Remove field required validation.
 */
var removeInputCheckField = function(fieldId, spanImgId) {
    $('#' + fieldId).attr('viewtype', '0');
    var fieldStr = $('input[name=needcheck]').val();
    $('input[name=needcheck]').val(fieldStr.replace(fieldId + ',', ''));
    $('#' + spanImgId).html('');
};
 
// Call to remove required validation functions
removeInputCheckField('field10391', 'field10391span');    // Remove required validation, main table text box, selection box
removeInputCheckField('field10849', 'field10849spanimg');    // Remove required validation, main table browse box
removeInputCheckField('field10859_0', 'field10859_0span');    // Remove required validation, detail table text box, selection box
removeInputCheckField('field10859_0', 'field10859_0spanimg');    // Remove required validation, detail browsing box
 
// Call Add Required Validation Function
addInputCheckField('field10391', 'field10391span');    // Add required validation, main table text box, selection box
addInputCheckField('field10849', 'field10849spanimg');    // Add required validation, main table browse box
addInputCheckField('field10859_0', 'field10859_0span');    // Add required validation, detail table text box, selection box
addInputCheckField('field10859_0', 'field10859_0spanimg');    // Add required validation, detail browse box

--------
//Copyright Statement: This is an original article by CSDN blogger Nine Party Technology, following CC 4.0 BY-SA Copyright Agreement, please attach a link to the original source and this statement for reproducing.
//Original Link: https://blog.csdn.net/lcwell1990/article/details/77042693

 

5. The code should first develop the process for initiating the application. If the process is implemented entirely in js code, be aware that:

5.1. Initial loading of pages

The page will have an initial page effect when it comes in. This needs to be done with jQuery loading method. What fields should be hidden and what fields should be displayed should be written in this code as follows:

$(document).ready(function() {
        
            var type = $('#field24579').val();
            if(type == "1") {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
                $('#field24575_format').hide();
                
            } else if(type == "0") {
                $('.col3').show();
                $('.ht01').show();
                $("#field24575").show();
                $('#field24575_format').hide();

            } else {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $('#field24575_format').hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
            }
        
    });

 

5.2 After the page is loaded, the user will then manipulate the contents of the page. For example, based on a field, determine if another field is required to be displayed or hidden. This change is controlled by events such as change events or click events

For example:

//Remove input Fill in the spaces at the ends of the fields in the box
$(document).ready(function() {
        $('#field24570').change(function() {
        $(this).val($.trim($(this).val()));
    });
});

5.3. Pages have changed dramatically since the user clicked Save. If the user clicked Save, how the page displayed after the user clicked Save, the jQuery loading event is also needed to complete. This loading event is divided into two parts, the first part is to initialize the loading page, the second part is to initialize the loading page after saving, and the application process is launched.In, the saved loading method and the initial loading method into the page are the same block of code. Every event that the same code occurs in the initial loading of the page, you have to write the corresponding page display effect. You cannot save after you have manipulated the page, and the page effect is not shown.

The sample code is as follows:

<!-- script Code, if referenced js File, please use and HTML In the same way. -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#field24579').change(function() {//input Change Event
            var type = $('#field24579').val();
            if(type == "1") {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
                $('#field24575_format').hide();
                
            } else if(type == "0") {
                $('.col3').show();
                $('.ht01').show();
                $("#field24575").show();
                $("#field24575").val("");
                $("#field24575span").html("");
                $('#field24575_format').hide();
                $("#field24575span").html("<img src='/images/BacoError_wev8.gif' align='absmiddle'>");
            } else {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $('#field24575_format').hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
            }
        })
    });
    $(document).ready(function() {
        $('#field24570').change(function() {
            $(this).val($.trim($(this).val()));
        });
    });
    
    $(document).ready(function() { //Page loading methods correspond to event methods and can be written in multiple load code blocks
        
            var type = $('#field24579').val();
            if(type == "1") {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
                $('#field24575_format').hide();
                
            } else if(type == "0") {
                $('.col3').show();
                $('.ht01').show();
                $("#field24575").show();
                $('#field24575_format').hide();

            } else {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $('#field24575_format').hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
            }
        
    });


</script>

5.4 After the code of the initiation application process is written above, it needs to be submitted. The submitted page is an audit template. At this time, all the code initialized from the loading page in the initiation application process template need to be copied to each audit node in the audit template. If not, the fields that need to be hidden have been hidden in the initiation application page after user action, and after submitting the pageHidden fields will reappear on the audit page because approvers can only fill in approval comments at this time, so the change event code on the page will not work, it will only be read-only, so on all the audit processes, only the loading code needs to be initialized

Examples include Audit Process Code Block:

<!-- script Code, if referenced js File, please use and HTML In the same way. -->
<script type="text/javascript">
    $(document).ready(function() {
        
            var type = $('#field24579').val();
            if(type == "1") {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
                $('#field24575_format').hide();
                
            } else if(type == "0") {
                $('.col3').show();
                $('.ht01').show();
                $("#field24575").show();
                $('#field24575_format').hide();

            } else {
                $('.col3').hide();
                $('.ht01').hide();
                $("#field24575").hide();
                $('#field24575_format').hide();
                $("#field24575span").html("");
                $("#field24575").val("0");
            }
        
    });


</script>

 

5.5. After the development of the initiation application code is completed, it should be synchronized to the archive node first, because the fields in the initiation application template are editable. After synchronization to the archive, all fields can not be edited and become read-only fields. Note: the code in the archive is only the initiation application page loading initialization method, and then synchronizes from the archive to all the audit nodes, the initiation application cannot beSynchronize, otherwise the Initiation Request field will become read-only, the person who initiated the process cannot operate the page and fill in the data, so the process development ends!

 

6. If there are inaccuracies, you can point out comments and work together to improve!

Keywords: Javascript JQuery Mobile

Added by phpcode on Fri, 06 Dec 2019 16:15:02 +0200