CODEWITHSUNDEEP
javascriptjquerycsssapui5
BurgGartenKind
BurgGartenKind

Reputation: 9

How to Color a Boarder in Sap UI5 with Jquery

I have the following problem: after the input in a field I check if the value of the field is ok. 

        var oCheckGrossTons = oGrossTons.getValue();
        var Msg = this.getResourceBundle().getText("validation.grossTons");

            if (oCheckGrossTons < 500) 
            {var oMessage = new Message({
            message: Msg,
            type: MessageType.Error
        });
        sap.ui.getCore().getMessageManager().addMessages(oMessage);

So and now I want to color the border of this field in red so the user can see where he made a mistake.

So I tried to solve this with a jQuery. I created a CSS style like:

.rrpGrossTons {
border-color: "red"}

and my jQuery looks like this:

$("...").addClass('.rrpGrossTons');

So my main problem is, how do I get the ID of the field, because I think I have to enter the ID in the ("...") after the $ symbol. And is the Syntax of my jQuery correct?

Upvotes: 1

Views: 442

Answers (3)

BurgGartenKind
BurgGartenKind

Reputation: 9

Okay after a hard weekend I have found a solution for my Problem

    var oCheckGrossTons = oGrossTons.getValue();
        if (oCheckGrossTons < 500) {
            this.setInvalidGrossTons(oGrossTons.getId());
        } else {
            this.removeErrorMsgForId(oGrossTons.getId());
        }

and 

setInvalidGrossTons: function (id) {
        var oMessageProcessor = new sap.ui.core.message.ControlMessageProcessor();
        var mainMsg = this.getResourceBundle().getText("validation.grossTons");
        var msg = new sap.ui.core.message.Message({
            message: mainMsg,
            additionalText: "",
            description: "",
            type: sap.ui.core.MessageType.Error,
            target: "/" + id + "/value",
            processor: oMessageProcessor
        });
        this.bus.publish("rrp", "validationError", {
            message: msg
        });
    },

so the only problem I am having now:

When I enter 100 tons i get the error Message :-) If I enter 200 tons i get the error Message twice Until I enter more than 500 tons ther are no error Messages anymore.

So how do I remove the double Error Message? I think the Problem is in my MessageProcessor.constructor There I am having 2 Entries withc different ID´s . I think I can solve the problem by remove the ID but i dont know how .

enter image description here

Upvotes: 0

Ruckert Solutions
Ruckert Solutions

Reputation: 1301

SAP has build in functionality for what you want to achieve:

// Mark control as not valid:
oGrossTons.setValueState(sap.ui.core.ValueState.Error);
// Reset the error state
oGrossTons.setValueState(sap.ui.core.ValueState.None);

So in your code it would be:

var oCheckGrossTons = oGrossTons.getValue();
if (oCheckGrossTons < 500) {
    oGrossTons.setValueState(sap.ui.core.ValueState.Error);
    var Msg = this.getResourceBundle().getText("validation.grossTons");
    oGrossTons.setValueStateText(Msg);
    var oMessage = new Message({message: Msg, type: MessageType.Error});
    sap.ui.getCore().getMessageManager().addMessages(oMessage);
} else {
    oGrossTons.setValueState(sap.ui.core.ValueState.None);
}

or use constrains as @A.vH mentionned in his answer.

Upvotes: 0

A.vH
A.vH

Reputation: 1026

You might want take a look at the valueState property of the InputBase (see an example)

Even better, you could use Constraints and let UI5 handle the validation for you.

<Input
    textAlign="Right"
    type="Number"
    value="{
        path: '/Grosston',
        type: 'sap.ui.model.type.Float',
        constraints: {
            minimum: 0,
            maximum: 500
        }
}"/>

Upvotes: 1

Related Questions