Chevron Above Tabs Showing Status

[Saikia Kashmiri]

Hi – Is it possible to show the current status of the record via a chevron row as shown in the attached?

Ideally would love to have it above the tabs but right below the tabs works as well.

The status moves forward based on different triggers – and I’d like the currently active status chevron to show in a green color while the rest show blue.

(Failing to reduce the size of the photo on my phone – working on it)

• This topic was modified 1 year, 3 months ago by Saikia Kashmiri.
• This topic was modified 1 year, 3 months ago by Saikia Kashmiri.

[Saikia Kashmiri]

Well looks like I can only edit my post twice so here’s the image in a reply heh.

Attachments:

1. 

   e14659cc-b7ff-4a03-baad-3fa648c22659.jpeg
   

[Alexander Bautz]

I have created a solution for you.

Add this to your Custom CSS:

.custom_chevron_placeholder {
    display: flex;
    font-size: 12px;
    color:#ffffff;
}

.chevronOuter {
    position: relative;
    background-color: blue;
    width: 125px;
    height: 50px;
    display: flex;
    align-items: center;
}

.chevronText {
    width:50%;
    margin-left: 15px;
}
.chevronOuter + .chevronOuter .chevronText{
    margin-left:30px;
}

.chevronRightUpper {
    background-color: #ffffff;
    width: 55px;
    height: 18px;
    transform-origin: center center;
    transform: rotate(45deg);
    position: absolute;
    right: -26px;
    top: 3px;
}

.chevronRightLower {
    background-color: #ffffff;
    width: 55px;
    height: 18px;
    transform-origin: center center;
    transform: rotate(-45deg);
    position: absolute;
    right: -26px;
    bottom: 3px;
}

And this to your Custom JS:

(function() {
    var statusArr = ["Draft", "Submitted For Sizing", "Sizing In Progress", "Sizing Completed", "Ready For Review"];
    var b = [];
    var index = -1;
    b.push("<div class='custom_chevron_placeholder'>");
    statusArr.forEach(status => {
        let bgColor = status === spjs.dffs.beforeProperties.Status ? "green" : "blue";
        b.push("<div class='chevronOuter' style='background-color:" + bgColor + ";z-index:" + index + ";'>");
        b.push("<div class='chevronText'>" + status + "</div>");
        b.push("<div class='chevronRightUpper'></div>");
        b.push("<div class='chevronRightLower'></div>");
        b.push("</div>");
        index -= 1;
    });
    b.push("</div>");
    jQuery("#tabWrapper").prepend(b.join(""));
})();

Please note that you must change the field name Status in this variable to match the actual status field name: spjs.dffs.beforeProperties.Status

This solution will only show the currently saved status and will not react to changing the status in the dropdown.

Alexander

[Saikia Kashmiri]

YOU ARE A LIFE SAVER :). Thank you. And of course I have more questions.

BTW can I get a QnA thread similar to what we’re using for each record in my parent list? If yes, I can ask this as an independent question so it’s useful for others.
I do see something called CommentBox but the post is very old. So not sure if it’s still a feature..

Thank you again.

[Alexander Bautz]

I’m not sure what you mean by QnA thread – like the one in this comment section? – if so, you can check out the commentBox solution.

Alexander

[Saikia Kashmiri]

Yes something like this comment section.

So a requestor enters a record – the suppliers who give inputs are reviewing it and have questions – they enter a question that the requestor gets notified about – and they come in and respond to it. The discussion can continue and is visible for everyone to see till the record gets marked completed.

Do I need to install commentBox separately? The last discussions on this are 4 years old and the link “https://spjsblog.com/commentbox-for-sharepoint/installation-manual-v3/#Updating_from_an_older_version” seems to assume I know how to even get that on my form after installation … is there a link that has a more beginner level walk through?

Thank you

[Alexander Bautz]

You should be able to install commentbox in DFFS by opening the file spjs-cbox_CEWP.html and copy the “src” for all the .js files to the textarea above the Custom JS and the “href” for the .css file to the textarea above the Custom CSS.

The content of the inner script tag must be inserted inside Custom JS.

The placeholder must be added to a HTML section in the tab where you want the cBox to appear.

<div id="cBox"></div>

Let me know if you have any further questions.

Alexander

• This reply was modified 1 year, 3 months ago by Alexander Bautz.

[Saikia Kashmiri]

Hey – Question. So looks like the CSS for Commentbox takes priority and suppresses the chevron code you gave above and code we’d built in to show buttons on the top of the form (but just under tabs) – What would be a good way to put the Commentbox css code to be called after the regular CSS code..?

I tried putting all of the code from sites/sitename/SPJS/cBox/css/spjs-cBox.css in the Custom CSS tab under other CSS code, but it’s not working .. (I blanked out the content of the spjs-cBox.css as well).. (:D yeah can you tell I don’t CSS much lol).

Thank You!
Kash

[Saikia Kashmiri]

Forgot to add that the commentbox itself does not show either – I tried putting the CSS link on top of the CSS tab and the JS links on top of JS Tab, added the trial license you gave along with the code in the JS tab body and used a html element in a tab… I’m using SP 2016 and the latest available version of DFFS Classic.

[Alexander Bautz]

It’s difficult to tell without looking at it. Can you email me some screenshots?

Alexander

[Author]

Posts